关于jquery append() 加入的元素,绑定事件无效的方法
问题是:博主在撰写前端代码的时候,想要实现一个动态增加行数的表单,经过查找一番资料后,用的jquery 中的append方法实现,在原form中,是绑定了一个hover事件,发现通过append追加的form表单,hover失效了,没有了鼠标悬浮的效果,但原form仍然有这个效果。
通过网上查找一番资料,不仅仅是hover存在这种问题,可能一些其他常用的jquery事件也存在这样的问题,比如:append了id 为abc的元素,那么$(#abc).click(function(){})
是没有效果的。
下面给出博主网上查找到的一些解决办法:
1.采用live()函数,(博主就是采用这种方法解决hover失效问题)
2.将事件直接绑定在DOM树上,也就是采用on函数,格式如下:
$("outerSelector").on('eventType','selector',function(){});
outerSelector 是一个一直存在的DOM, selector是你要监听点击的节点;
最后附上博主解决hover失效问题代码:
jq183(".movie_box").live("hover",function(event){
if(event.type=='mouseenter'){
var html_cz = "<div class='kzqy_czbut'><a href='javascript:void(0)' class='del' >删除</a></div>"
jq183(this).css({"border":"1px solid #0099ff"});
jq183(this).children(".wjdc_list").after(html_cz);
}
else{
jq183(this).css({"border":"1px solid #fff"});
jq183(this).children(".kzqy_czbut").remove();
}
});
OK,搞定~