html重置后javascript事件丢失

Question

我有一种情况,在某种程度上,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>

这个小伙子展示了我所遇到的问题.

Answer 1

简单回答:使用 .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过.live的:

• 您可以取消事件冒泡.当你使用时live,事件会一直冒泡body,然后你的处理程序被调用,所以没有办法取消它的冒泡.(从jQuery 1.4开始,可以通过使用上下文参数来防止这种情况:http://api.jquery.com/live/)
• 由于您特意附加到DOM元素,因此每次点击主体上的任何其他DOM元素时都不会调用它,因此,由于现在必须执行较少的工作,因此性能更高.

这是一篇精彩的文章,精美地解释了实时,委托和绑定之间的差异,并讨论了每种方法的细微差别.感谢@andyb指出这个链接.