关于jquery append() 加入的元素,绑定事件无效的方法


关于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,搞定~


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: