HTML代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>测试</title> 7 <script src="jquery-1.11.3.js"></script> 8 <script src="test1.js"></script> 9 </head> 10 11 <body> 12 <div id="hide"> 13 <div class="the-test"> 14 #test# 15 </div> 16 </div> 17 <div id="show"> 18 </div> 19 </body> 20 21 </html>
javascript代码：
1 /** 2 * 解决用replace方法动态生成多条数据时，对每条数据添加点击事件需要更改div，此处可以通过js动态生成点击事件而不更改div。 3 * 4 */ 5 6 $(function () { 7 init(); 8 }); 9 var init = function () { 10 11 var a = {}, 12 len = 0, 13 i = 0; 14 //测试数据 15 a = { 16 arr: ['test1', 'test2', 'test3'] 17 }; 18 //遍历动态生成数据 19 for (i; i < a.arr.length; i++) { 20 var hide = $('#hide').html() 21 .replace(/#test#/g, a.arr[i]); 22 $('#show').html($('#show').html() + hide); 23 } 24 //动态添加点击事件 25 $('body #hide').remove(); //移除#test#所在的div 26 27 /**************js的实现方式*************/ 28 // var nodes = $('.the-test'); 29 // for (i = 0, len = nodes.length; i < len; i++) { 30 // (function (i) { 31 // nodes[i].onclick = function () { 32 // alert(nodes.length); 33 // alert(nodes.eq(i).text()); //获取点击事件的内容 34 // }; 35 // }(i)); 36 // } 37 /**************jquery的实现方式********************/ 38 $("#show").delegate(".the-test","click",function(){ 39 console.log($(this).text()); 40 }); 41 };