html重置后javascript事件丢失

我有一种情况,在某种程度上,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展示了我遇到的问题.

$(function(){ 
    $("#TESTButton").live('click',function(){
            alert("Button has been clicked!");
    })
});

$(function(){ 
    $('#container').delegate('#TESTButton','click',function(){
            alert("Button has been clicked!");
    })
});