js动态append添加的节点点击事件无效
来源:互联网 发布:win7系统禁止安装软件 编辑:程序博客网 时间:2024/05/21 17:12
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级事件的事件捕获和事件冒泡
阅读全文
0 0
- js动态append添加的节点,点击事件无效
- js动态append添加的节点点击事件无效
- JS为循环动态生成的节点添加点击事件
- JS为循环动态生成的节点添加点击事件
- js动态添加元素为何 点击事件无效
- jquery append添加的元素事件无效
- js动态添加点击事件
- 对于js使用append追加的节点无法添加事件的解决方法
- js动态添加带参数的点击事件
- jQuery append动态添加的元素添加事件没有效果
- Js(DOM)动态添加节点和事件
- js动态添加点击事件常见错误
- JS触发a节点的点击事件
- js实现html节点、CSS样式、事件的动态添加以及html覆盖层的添加
- js-动态添加li、option,并且添加其点击事件
- jquery为动态的节点添加事件
- live()解决Jquery采用append添加的元素事件无效的
- 解决jQuery使用append添加的元素事件无效的方法
- 钙钛矿太阳能电池研究进展
- 剑指offer——二叉树中和为某一值的路径(不错)
- 网易笔试题:男女小孩站队问题
- C语言的指针兼容性讨论
- 自定义MVC
- js动态append添加的节点点击事件无效
- Apk源码的加固(加壳)原理解析和实现
- [BZOJ3944]Sum-杜教筛
- Range Sum Query
- 关于Swift的私有化
- PAT-A-1073. Scientific Notation (20)
- python 作用域查找规则
- 以考代学
- 神经网络pooling层