jQueryon（）方法绑定动态元素的点击事件实例代码浅析

之前就⼀直受这个问题的困扰，在jQuery1.7版本之后添加了on⽅法，之前就了解过，其优越性⾼于live(),bind(),delegate()等⽅法，在此之前项⽬中想⽤这个来测试结果发现，居然动态⽣成的标签点击了没反应，⽽live⽅法却能够⽀持，于是乎到处查资料，问⽹友，结果找了好久在⼀篇⽂章中终于找到了答案。。。

jQuery 使⽤on绑定动态⽣成的元素时，不能直接⽤该对象操作，⽽是选择其⾮动态⽣成的⽗节点然后再找到本⾝才能达到效果。⼤家看看源码就知道了。⽣成的按钮基数项on⽅法点击⽆效live⽅法有效。⽐如页⾯上有下边两个元素：

使⽤下边的jQuery代码⼤家可以对⽐看看区别：

$(function () {var a = 1,

$_div = $('#test');

$('input[name=addbtn]').on('click', function () {

$_div.append('');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()⽅法绑定动态元素的点击事件的相关知识，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！