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

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

您好!对于使用layui重新渲染的innerHTML点击事件不生效的问题,可能有几个原因。以下是一些可能的解决方法: 1. 检查layui模块是否正确加载:确保您已正确加载layui模块,并且没有任何错误或警告。您可以检查浏览器的开发者工具控制台来查看是否有任何相关的错误信息。 2. 使用layui的事件绑定方法:layui提供了一些特定的事件绑定方法,例如form.on、table.on等等。如果您使用了layui的组件,尝试使用它们来绑定事件,而不是直接使用innerHTML绑定。 3. 使用事件代理:如果您动态添加了一些元素,并希望为它们绑定点击事件,可以考虑使用事件代理。您可以将点击事件绑定在一个父元素上,然后通过事件冒泡捕获子元素的点击事件。 以下是一个使用事件代理的示例代码: ```javascript // 绑定点击事件到父元素 layui.$('#parentElement').on('click', '.childElement', function () { // 处理点击事件 }); // 动态添加子元素 layui.$('#parentElement').append('<button class="childElement">点击我</button>'); ``` 4. 检查其他代码逻辑:请确保您的代码逻辑正确,并没有其他相关问题导致点击事件不生效。比如,可能有其他代码阻止了点击事件的冒泡或默认行为。 希望这些解决方法能帮到您!如果问题仍然存在,请提供更多的代码和详细信息,以便我更好地帮助您解决问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值