动态生成的DOM做点击事件无效

最新推荐文章于 2024-04-01 03:56:42 发布

原创最新推荐文章于 2024-04-01 03:56:42 发布 · 9.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#dom #javascript

JavaScript 专栏收录该内容

59 篇文章

订阅专栏

在项目中遇到动态生成DOM元素后，为这些元素添加的点击事件不起作用的问题。通过JS递归方式构建类似淘宝列表的HTML结构，发现生成的li元素点击事件无效。经过研究，找到解决动态DOM点击事件失效的方法。

最近写项目的时候遇到了这种情况，页面中的html标签都是从后台获取的数据，然后利用JS添加到页面上，当再对生成的标签写点击事件（click）时没有效果。

项目时这样的，首先从后台接收到数据然后通过递归动态生成标签，代码如下：

var showTree = function(a,b){
     if(a.nodes.length <= 0) return ''                     
     var str = '<ul class="zuzhicengjiContent">';
     for(var i = 0 ; i < a.nodes.length; i ++){
              str += '<li data-id="'+a.nodes[i].id+'" data-pid="'+ a.nodes[i].pid + '" data-instituttioncode="'
              + a.nodes[i].instituttioncode + '" title="'+a.nodes[i].name+'"><h5><i class="icon inho inhoicon-icon-up"></i><span>'
              + a.nodes[i].name+'</span></h5>';
              str += showTree(a.nodes[i])
              str += '</li>'; 

     }
     str += '</ul>'
     return str

 }

然后类似生成淘宝这种列表样式的东西

这里写图片描述

生成完事之后，给生成的li写点击事件无效，没有任何反应，通过测试才知道是动态生成dom点击事件才失效。百度查资料之后找到了解决方案，亲测有用，代码如下：

/**
* 需要找到这个标签的父级，随便什么，也可以用document代替，这里父级标签是 .zuzhicengji ，on里面的参数
* 第一个参数  做的是什么事件
* 第二个参数  做事件的标签（“或哪一类标签”）
*/
$(".zuzhicengji").off("click").on("click","h5",function(event){
   event.stopPropagation();//阻止冒泡事件    阻止点击事件向上传播
   var id = $(this).parent("li").data("id");
   //小三角的改变
   $(this).children("i").toggleClass("inhoicon-icon-up1");
   $(this).siblings("ul").css("display") == "none" ?    $(this).siblings("ul").css("display","block") : $(this).siblings("ul").css("display","none")
)}