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 };
  • 相关阅读:
    S2 第二章数据库的实现
    理解ThreadLocal(之二)
    理解ThreadLocal(之一)
    save(),saveOrUpdate(),merge()的区别
    Hibdernate入门
    Hibernate第一个例子
    在运行Hibernate Hello World程序的时候,抛如下错误: view plain Exception in thread "main" org.hibernate.exception.LockAcquisitionException 解决方法
    Oracle函数
    UDP
    多线程下真正的单例
  • 原文地址:https://www.cnblogs.com/rain318/p/6653465.html
Copyright © 2011-2022 走看看