js动态append添加的节点点击事件无效

最新推荐文章于 2023-02-12 20:03:08 发布

想要成为程序媛的DUDUfine

最新推荐文章于 2023-02-12 20:03:08 发布

阅读量1.4w

点赞数 7

分类专栏：前端学习文章标签： javascript

本文链接：https://blog.csdn.net/DUDUfine/article/details/73446120

版权

前端学习专栏收录该内容

18 篇文章 1 订阅

订阅专栏

js动态append添加的节点点击事件无效

问题
js的append动态添加节点，添加后节点中的点击点击时无效，
原代码是：

//点击事件执行的方法定义
function downLoadFunction(attachmentId) {
   window.location.href="/doFile/download/?attachmentId="+attachmentId;
}
$.ajax({
      type:"post",
      url:"/" + PROJECT_NAME + "/landAttachmentAction/selectAttachmentByRelatedIds.do",
      data:params,
      dataType:"json",
      success:function(result){
          if(result.data){
              var data=result.data;
              var imgList=$("#imgList");
              //ajax请求成功后遍历数组添加新节点
              for(var i=0;i<data.length;i++){
              $("#imgList").append("<img src='/doFile/download/?attachmentId="+data[i].fileId+"' style='max-height: 800px;max-width:800px'/><br/>")
              $("#imgList").append("<a onclick='downLoadFunction("+data[i].fileId+")'  href='#' style='font-size: 16px;text-decoration-line: underline'>"+data[i].fileName+"（点击下载）</a><br/><br/>")
               }
         }
     }
})

页面的显示如图：
这里写图片描述
这时候点击这里的文件名并没有调用点击事件

为什么呢？

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

解决方法：
后来用事件委托的方法解决

//为所有类为imgItem的节点添加事件，$(document).on("click","指定的元素",function(){});是将指定的事件绑定在document上，只要而新产生的元素符合指定的元素，就会绑定此事件  ，而且这种方法当页面需要为多个节点初始化事件的时候，就不需要一个个加onclick事件
        $(document).on("click",".imgItem",function(){
            var fileId=$(this).attr("fileId")
            downLoadFunction(fileId);
        })
$.ajax({
      type:"post",
      url:"/" + PROJECT_NAME + "/landAttachmentAction/selectAttachmentByRelatedIds.do",
      data:params,
      dataType:"json",
      success:function(result){
          if(result.data){
              var data=result.data;
              var imgList=$("#imgList");
              for(var i=0;i<data.length;i++){
              $("#imgList").append("<img src='/doFile/download/?attachmentId="+data[i].fileId+"' style='max-height: 800px;max-width:800px'/><br/>")
                        $("#imgList").append("<a fileId='"+data[i].fileId+"' class='imgItem' id='img"+i+ "' href='#' style='font-size: 16px;text-decoration-line: underline'>"+data[i].fileName+"（点击下载）</a><br/><br/>")
               }
         }
     }
})

问题延伸：
在解决问题的时候，遇到另一个问题，我在每个新节点中加入一个id，然后为这个节点添加事件，如下：

$("#img"+i).on("click",function (){
         downLoadFunction(data[i].fileId);
})

但是没有生效，原因是：

知识拓展：
这是因为on()函数并不是为当前jQuery对象匹配的元素绑定事件处理函数，而是为它们的后代元素中符合选择器selector参数的元素绑定事件处理函数。on()函数并不是直接为这些后代元素挨个绑定事件，而是委托给当前jQuery对象的匹配元素来处理。由于DOM 2级的事件流机制，当后代元素selector触发事件时，该事件会在事件冒泡中传递给其所有的祖辈元素，当事件流传递到当前匹配元素时，jQuery会判断是哪个后代元素触发了事件，如果该元素符合选择器selector，jQuery就会捕获该事件，从而执行绑定的事件处理函数。

拓展阅读
jQuery.on() 函数详解
 关于DOM2级事件的事件捕获和事件冒泡