jQuery on()方法绑定动态元素的点击事件无效

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

jQuery 使用on绑定动态生成的元素时，不能直接用该对象操作，而是选择其非动态生成的父节点然后再找到本身才能达到效果。大家看看源码就知道了。生成的按钮基数项on方法点击无效live方法有效。

比如页面上有下边两个元素：

<input type="button" name="addbtn" value="按钮添加" />
<div id="test"></div>

使用下边的jQuery代码大家可以对比看看区别：

$(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);});
});

代码简单，就不演示了。

转载于:https://www.cnblogs.com/imsomnus/p/4512261.html

jQuery on()方法绑定动态元素的点击事件无效相关推荐

jQuery on()方法绑定动态元素的点击事件无响应的解决办法
$('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count ...
DialogFragment中通过dataBinding绑定View，设置点击事件无效，通过getWindow设置dialog位置和大小无效。
1.问题描述:DialogFragment中通过dataBinding绑定View,设置点击事件无效. private val binding: CoreDialogEditContentBindin ...
动态生成html点击事件无效,动态生成的DOM不会触发onclick事件的原因及解决方法...
最近朋友在做一个项目的时候,遇到动态加载微博内容,然后点击"展开评论"后获取该微博的所有评论.这里使用了动态加载的点击加载评论. 然后再写 $(".get_comment ...
js动态添加元素为何点击事件无效
本来觉得不用提的,但是发现最近几个朋友在提,而且新来的小兄弟也有点迷糊这个,所以就简单说说, 看看下面的代码: <!DOCTYPE html> <html><head&g ...
JQuery 动态生成元素添加点击事件
页面代码 <html> ... <body> <div id="divBox"></div> <script> $(fu ...
jQuery移除或禁用html元素的点击事件
移除或禁用html元素的点击事件可以通过css实现也可以通过js或jQuery实现. 一.CSS方法 .disabled { pointer-events: none; } 二.jQuery方法方法 ...
html 点击子元素,html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡...
如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: 你好, 战无不胜 [注销] js: 方法1: UserLogout.οnclick=function (e) ...
css中为伪元素增加点击事件和hover
鼠标悬停在父元素上面时为伪类元素增加样式  <div class="father"></div><style ...
html,js 中如何屏蔽div子元素点击事件会触发父元素的点击事件（$event.cancelBubble=true；）
1. 第一种方法:html中屏蔽父元素的点击事件($event.cancelBubble=true;) <div (click)="select($event)"> & ...

jQuery on()方法绑定动态元素的点击事件无效

jQuery on()方法绑定动态元素的点击事件无效相关推荐

最新文章

热门文章