动态生成数据后绑定事件

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

转载于:https://www.cnblogs.com/rain318/p/6653465.html

动态生成数据后绑定事件相关推荐

jquery 动态生成html后click事件不触发原因
转自:http://www.iam3y.com/html/560.html 最近在做一个项目的时候,遇到动态加载微博内容,然后点击"展开评论"后获取该微博的所有评论.这里使用了动态 ...
js动态生成的DOM绑定事件失效的问题
事件委托原理:事件冒泡机制. 优点:1. 可以大量节省内存占用,减少事件注册.比如ul 上代理所有li 的click 事件. 2. 可以实现当新增子对象时,无需再对其事件进行绑定.对动态内容部分尤为合 ...
js 动态生成 input 的绑定事件 blur 无效
☯ 背景描述今天在进行代码编写时,我需要根据ajax返回的数据动态生成一个表格,而针对于其中的input标签,要求设置失去焦点的blur事件需要实现的界面截图如下: 最开始编写的 js 代码如下: ...
jQuery Dom 操作，动态生成dom，绑定事件
1.获取内容 - text().html()以及val() text()-设置货返回所选的元素的文本内容:$("#text").text(); html()- 设置或返回所选元素的 ...
ajax请求动态生成dmo无法绑定事件解决方案
前端 1.前端代码 2.后端代码因为使用ajax:是不会刷新dom元素结构的,我怎么绑定事件都不生效,用jquery的on也不行,后来用行内事件绑定的方式终于搞定了. 1.前端代码 <!DOC ...
动态生成html点击事件无效,动态生成的DOM不会触发onclick事件的原因及解决方法...
最近朋友在做一个项目的时候,遇到动态加载微博内容,然后点击"展开评论"后获取该微博的所有评论.这里使用了动态加载的点击加载评论. 然后再写 $(".get_comment ...
通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里
本人公众号上线啦!!! 公众号与博客名一样:没有腹肌的程序猿公众号文章类型:工作上所遇到的需求实现方案分享. 此外也会提供一些数据集供大家使用.(这个还在规划中,毕竟打工人时间挺紧的,哈哈哈哈) 到 ...
jQuery给动态添加的元素绑定事件的方法
jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...
jQuery 为动态添加的元素绑定事件
在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...

动态生成数据后绑定事件

动态生成数据后绑定事件相关推荐

最新文章

热门文章