關於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 联系我们: