我有一种情况,在某种程度上,div的html内容被更改为其他东西,然后被更改回来.一些
jquery ui控件是行为不端的.我已将问题简化为以下代码段,它基本上显示与该按钮关联的事件处理程序不再触发.我假设这些都是在它们消失的时候收集的垃圾.所以我的问题是 –
如何防止事件处理程序从DOM中丢失时被垃圾回收？
我知道我可以重新分配click()函数,但由于我使用的是外部库(jquery ui),我真的不知道它对我的控件做了什么.我只是希望他们的事件恢复原样.
<div id="container">
<p>This container has a button,which will forget its click()...</p>
<input id="testbutton" type="button" value="Click Me!"/>
</div>
<script type="text/javascript">
$(function(){
$("#testbutton").click(
function(){
alert("Button has been clicked!");
})
});
</script>
<div>
<p>... when this button reseats html</p>
<input id="actionbutton" type="button" value="Toggle"/>
</div>
<script type="text/javascript">
var toggle = false;
var html;
$(function(){
$("#actionbutton").click(
function(){
toggle = !toggle;
if(toggle){
html = $("#container").html();
$("#container").html("");
} else $("#container").html(html);
})
});
</script>
这个jfiddle展示了我遇到的问题.
解决方法
简单回答：使用.live
$(function(){
$("#testbutton").live('click',function(){
alert("Button has been clicked!");
})
});
这是更新的小提琴：http://jsfiddle.net/mrchief/8S5E4/1/
说明：更改DOM时,还会删除附加元素的事件处理程序.使用.live将事件处理程序附加到“body”(并按DOM元素过滤),以便即使在删除/添加相同的DOM元素后它也“存在”.
使用.delegate也可以达到同样的效果：
$(function(){
$('#container').delegate('#testbutton','click',function(){
alert("Button has been clicked!");
})
});
使用.delegate：http://jsfiddle.net/mrchief/8S5E4/6/
我建议使用.delegate over .live：
>您可以取消事件冒泡.当你使用live时,事件一直冒泡到body然后你的处理程序被调用,所以没有办法取消它的冒泡. (从jQuery 1.4开始,可以通过使用context参数来防止这种情况：http://api.jquery.com/live/)
>因为你特意附加了一个DOM元素,所以每次点击身体上的任何其他DOM元素时都不会调用它,因此它更具性能,因为它现在必须做更少的工作.
这是一篇精彩的文章,精美地解释了differences between live,delegate and bind,并讨论了每种方法的细微差别.感谢@andyb指出这个链接.
