8524

JQuery 动态监听新增加的DOM

<div class="fu">
<div class="zi"></div>
<div class="zi"></div>
</div>
<span class="more">点击更多</span>

最简单的比如我对上面的class为zi的元素添加点击事件

$(".fu .zi").click(function() {
      console.log("对应的子元素被点击了");
    });
$(".fu .zi").bind('click',function() {
      console.log("对应的子元素被点击了");
    });
$(".fu .zi").on('click',function() {
      console.log("对应的子元素被点击了");
    });

这是最常见和常用的几种办法,我一般前面两种用得比较多。
但是如果我在其他地方用JS事件在类fu的下面继续动态创建了一些新的div且类名还是zi比如

$(".more").click(function () {
 var divzi= $("
<div>").addClass("zi");
 divzi.appendTo(".fu");
 })

点击更多之后添加的div是得不到监听的 也就是说我们上面写的三种绑定的点击事件都不会起作用,点击新添加的DIV 控制台是不会有log输出的。
那么如何让新增的div被监听呢。
其实很简单,但是我之前一直没有想到好的解决方案。以前喜欢用live但是最新版本的jq已经废除了。
把上面写的第三个方法稍微改一下 如下

$(".fu").on('click','.zi',function() {
 console.log("对应的子元素被点击了");
 });

还是用on来绑定,不同的一点是 .on之前写的筛选器 要写不会变化的,你直接写body都行。只要你下面能找到.zi
这样就能对新增加的dom也进行了监听。举一反三。其他的也不成问题了。
对新增元素的监听很实用,尤其现在Ajax越来越实用,Ajax加载的东西也是需要动态监听

转载原创文章请注明,转载自: 罗正荣个人博客 » Jquery 动态监听新增的DOM

10条评论

Loading...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

  1. Everytime Britney Spears 3:53