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就会捕获该事件,从而执行绑定的事件处理函数。