jQuery on()方法绑定动态元素的点击事件实例代码浅析
之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态生成的标签点击了没反应,而live方法却能够支持,于是乎到处查资料,问网友,结果找了好久在一篇文章中终于找到了答案。。。
jQuery 使用on绑定动态生成的元素时,不能直接用该对象操作,而是选择其非动态生成的父节点然后再找到本身才能达到效果。大家看看源码就知道了。生成的按钮基数项on方法点击无效live方法有效。
比如页面上有下边两个元素:
1
2
3
|
<input type= "button" name= "addbtn" value= "按钮添加" /> <div id= "test" > </div> |
使用下边的jQuery代码大家可以对比看看区别:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
$( function () { var a = 1, $_div = $( '#test' ); $( 'input[name=addbtn]' ).on( 'click' , function () { $_div.append( '<input type="button" name="test' + a + '" value="按钮' + a + '"/>' ); a++; }); //偶数项点击事件 $_div.on( 'click' , 'input[name^=test]:even' , function () { alert( '我是有效的on方法,你能看见我吗:' + this .value); }); //奇数项绑定的点击事件 发现点击无效,而是用live方法却能够支持 $( 'input[name^=test]:odd' ).on( 'click' , function () { alert( '我是无效的on方法,你不能看见我' ); }); //奇数项绑定的点击事件 发现点击无效,而是用live方法却能够支持 $( 'input[name^=test]:odd' ).live( 'click' , function () { alert( '我是live方法,你能看见我吗:' + this .value); }); }); |
jQuery on()方法绑定动态元素的点击事件实例代码浅析的更多相关文章
- jQuery on()方法绑定动态元素的点击事件无响应的解决办法
$('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count ...
- jQuery on()方法绑定动态元素的点击事件
之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...
- jQuery on()方法绑定动态元素的点击事件无效
之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...
- jQuery绑定动态元素的点击事件无效
之前就一直受这个问题的困扰,在写ajax加载数据的时候发现,后面追加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢?那么,我们通过下面的示例简单说明. 示例如下: ...
- jquery on()方法绑定多个选择器,多个事件
on(events,[selector],[data],fn) •events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myP ...
- jQuery on()绑定动态元素出现的问题小结
jQuery on()方法是官方推荐的绑定事件的一个方法.使用 on() 方法可以给将来动态创建的动态元素绑定指定的事件,通过本文给大家介绍jQuery on()绑定动态元素出现的问题小结,需要的朋友 ...
- jquery无法为动态生成的元素添加点击事件的解决方法
遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...
- jquery:为动态加载的元素添加点击事件
jquery:为动态加载的元素添加点击事件 最近在做项目的时候遇到了这样一个问题,给用ajax动态加载出来的内容添加点击事件,但是怎么都触发不了,经过查询试验总结出正确的写法 在jquery1.7之前 ...
- Jquery 动态添加元素 添加点击事件
给动态添加的元素添加js事件,不能直接添加js事件,需要借助on( )方法,给选择器指定的子元素添加事件处理函数,并非选择器本身: 1. 语法 $(selector).on(event,childSe ...
随机推荐
- 并发模型之Future设计模式
一.Futrue模式 客户端发送一个长时间的请求,服务端不需等待该数据处理完成便立即返回一个伪造的代理数据(相当于商品订单,不是商品本身),用户也无需等待,先去执行其他的若干操作后,再去调用服务器已经 ...
- Sprng IOC&AOP&事务梳理 (文章整理new)
IOC <理解 IOC> <IOC 的理解与解释> 正向控制:传统通过new的方式.反向控制,通过容器注入对象. 作用:用于模块解耦. DI:Dependency Inject ...
- csharp:search and Compare string
/// <summary> /// 涂聚文 /// 2011 捷为工作室 /// 缔友计算机信息技术有限公司 /// </summary> /// <param name ...
- 关于log4j知识
今天下午接触到log4j知识,花了几个小时,百度了一圈,总算是懂了一些. log4j的作用:log4j是一个日志输出的插件专门用来进行日志管理的,根据我的理解就是用来执行我们用来检测程序bug的Sys ...
- Swiper轮播图
今天咱们来说一下.Swiper轮播图. 超级简单的: 翠花,上代码: <!DOCTYPE html> <html lang="en"> < ...
- CSS 层叠与继承
三种继承css方式 1.段内继承 <p style="color: red;font-size:50px;">样式原文</p> 原文变成 红色, 原文字体变 ...
- LeetCode赛题395----Longest Substring with At Least K Repeating Characters
395. Longest Substring with At least K Repeating Characters Find the length of the longest substring ...
- 公司企业邮箱被qq邮箱拒绝后
公司新弄了服务器,建了exchange server,通知全公司试用时发现给客户群发邮件会被拒绝,返回的错误信息是 550 Mail content denied 出错原因:该邮件内容涉嫌大量群发,并 ...
- [C++]多线程: 教你写第一个线程
原文:http://blog.csdn.net/cn_wk/article/details/62236057 hello thread! 声明线程A的端口号 #include <pthread. ...
- 七、angularjs 倒计时
使用定时器时离开页面需要清除定时器,清除的方法有两种分别针对页面有缓存和没有缓存 1.页面有缓存 2.页面没有缓存 angularjs倒计时首先需要注入:$interval 60s倒计时 vm.sec ...