之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态生成的标签点击了没反应,而live方法却能够支持,于是乎到处查资料,问网友,结果找了好久在一篇文章中终于找到了答案。。。
jQuery 使用on绑定动态生成的元素时,不能直接用该对象操作,而是选择其非动态生成的父节点然后再找到本身才能达到效果。大家看看源码就知道了。生成的按钮基数项on方法点击无效live方法有效。UI前端框架最新力作!有奖试读!
比如页面上有下边两个元素:
<input type="button" name="addbtn" value="按钮添加" /> <div id="test"></div>
$(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); }); });
代码简单,就不放演示页了,如果有什么不明白的,可以留言。UI前端框架最新力作!有奖试读!
相关推荐
本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要...
jQuery 使用on绑定动态生成的元素时,不能直接用该对象操作,而是选择其非动态生成的父节点然后再找到本身才能达到效果。大家看看源码就知道了。生成的按钮基数项on方法点击无效live方法有效。 比如页面上有下边两个...
支持给动态元素和属性绑定事件的是live和on,其中live在JQUERY 1.7之后就不推荐使用了。现在主要用on,使用on的时候也要注意,on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等,可以放在...
原绑定方法: $("#sdfsd").on("click",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法; 解决办法更改绑定方法为: $("#sdfsd").unbind(...在绑定新click方法前对元素所绑定的click方法解绑
jQuery on()方法是官方推荐的绑定事件的一个方法。使用 on() 方法可以给将来动态创建的动态元素绑定指定的事件,通过本文给大家介绍jQuery on()绑定动态元素出现的问题小结,需要的朋友参考下
主要介绍了JQuery中使用on方法绑定hover事件实例,本文用于一些特殊环境下,需要的朋友可以参考下
主要介绍了jQuery中对未来的元素绑定事件用bind、live or on,需要的朋友可以参考下
事件方法触发事件:jQuery中的事件方法在调用时如果传参数,表示绑定事件,如果不传参数,表示触发事件。;trigger()方法触发事件:使用trigger()方法可以触发指定事件。;triggerHandler()方法触发事件:...
这两天工作中遇到使用js动态加载内容,同时需要对加入的内容绑定点击事件的,当时想想了想可以使用内联的onclick 来实现,后来没有这样做,使用的是 on(‘click’,function(){}) ,然而使用on方法的时候就发现,on 对...
jQuery 使用on绑定动态生成的元素时,不能直接用该对象操作,而是选择其非动态生成的父节点然后再找到本身才能达到效果。大家看看源码就知道了。
在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况: <ul></ul> 假设我们要给ul动态添加的绑定click事件形成如下结果 <li name=apple>apple <li name=pear>pear [removed] function test...
今天在写JQUERY时遇到个问题:当使用脚本动态添加元素xxx时,但... 但是由于1.8版本后live这种方法不再支持,所以需要用下述jquery中on方法解决脚本动态添加元素: 代码如下: $(“.y”).on(‘click’,’.x’,function);
原绑定方法: 代码如下: $(“#sdfsd”).on(“mouseout”,function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法; 解决办法更改绑定方法为: 代码如下: $(“#sdfsd”).unbind(“click”).click...
JQuery绑定事件四种实现方法解析 jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码。下面我们来看下jQuery...
jquery1.10去除了.live()方法,新增了一个.on()方法来给元素绑定事件,下面有个不错的示例,大家可以参考下
on(events,[selector],[data],fn) events:一个或多个用空格分隔的事件类型和可选的命名空间,如”click”或”keydown.myPlugin” 。 selector:一个选择器字符串用于... jQuery 3.0中已弃用此方法,请用 on()代替。