动态生成数据后绑定事件

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 };