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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/DUDUfine/article/details/73446120

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级事件的事件捕获和事件冒泡

展开阅读全文

没有更多推荐了,返回首页