js动态append或者html()添加的节点点击事件无效

问题:

jQuery通过for循环添加的节点,再对各个节点添加点击事件无效,如下代码:

//插入节点
 for (var i = 0; i < strs.length; i++) {
                s += "<div class='div'>" + strs[i] + "</div>";
  }
  $(".his_content").html(s);
  //$(".his_content").append(s);
//点击事件
$('.his_content .div').click(function(){
    console.log('ok')
})

原因:

这里的点击事件是无效的,百度后发现,是因为append中的节点是在整个文档加载后才添加的,页面并不会为未来的元素初始化添加点击事件,所以使用这种方式动态添加的节点中的点击事件没有生效。

解决方案:

事件委托。给所有的类名为.div的元素添加点击事件,将指定事件绑定在document上,只要而新产生的元素符合指定的元素,就会绑定此事件 ,而且这种方法当页面需要为多个节点初始化事件的时候,就不需要一个个加onclick事件。

  $(document).on("click", ".div", function () {
        console.log("ok")
    })

不完美女孩

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。