今天工作中需要在页面动态生成html代码,但发现新生成的代码的click事件失效了(非动态生成的代码已经绑定了click事件),于是在网上找了很多解决办法,很多都比较复杂,且使用的jquery都比较老,于是结合网上加上自己的测试,找到了一种解决方法。
我使用的jquery是1.9.11,jquery1.7之后就将live方法废弃了,新增了on和off方法,我的解决办法就是使用on方法,首先看代码：
李健1
李健2
李健3
李健4
李健5
增加
$(function(){
$(".div").click(function(){
var h = "";
for(var i=0;i<5;i++){
h += "李健"+i+i+"
";
}
$(".h3").append(h);
});
});
//这里我每点击增加一次会在最后增加5行李健i
,我现在要让所有的都绑定click事件(包括动态生成的)
$(".h3").on("click","h3",{foo:"文本:"},function(event){
alert(event.data.foo+this.textContent);
});
是不是很简单,这里选择
作为父元素调用on方法绑定click事件,这样父元素下的所有元素都绑定了click事件,有时候并不需要所有的都绑定,那怎么办？好办,只需在"click"后增加选择器(也就是你想选定的子元素),{foo:"文本:"}:表示传给event.data的数据(参数),在处理函数中我们可以调用event.data.foo读取到传入的函数值。打开浏览器调试工具你还可以获取中的文本,我这里是this.textContent,大家可以根据实际情况发挥。
总之,记住如果你要绑定动态生成的元素事件，一定要先找到他的父元素(父元素不能是动态生成的,否则继续往上找),在父元素中绑定，然后再进行过滤就ok了,对了，我测试了hover事件发现不行,没去深究原因。