zoukankan      html  css  js  c++  java
  • 动态生成数据后绑定事件

    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 };
  • 相关阅读:
    团队总结-文艺复兴
    文艺复兴-冲刺总结
    文艺复习-测试博客
    文艺复习-冲刺集合
    冲刺第一天
    凡事预则立
    2020软件工程作业05
    2020软件工程作业04
    前端怎么去学
    十、Kernel_3.0.35版本和Kernel_4.1.15版本在SPI驱动实现机制的差异
  • 原文地址:https://www.cnblogs.com/rain318/p/6653465.html
Copyright © 2011-2022 走看看