动态生成的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-hljs-string">'+[i].id+'" data-phljs-string">'+ [i].pid + '" data-instituttioncode="'
              + [i].instituttioncode + '" title="'+[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

 }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

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

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

/**
* 需要找到这个标签的父级，随便什么，也可以用document代替，这里父级标签是 .zuzhicengji ，on里面的参数
* 第一个参数  做的是什么事件
* 第二个参数  做事件的标签（“或哪一类标签”）
*/
$(".zuzhicengji").off("click").on("click","h5",function(event){
   ();//阻止冒泡事件    阻止点击事件向上传播
   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")
)}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13