答案很简单：使用.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元素的，所以它不会在每次单击body上的任何其他DOM元素时被调用，因此性能更高，因为它现在需要做的工作更少。

这里有一篇很棒的文章，很好地解释了differences between live, delegate and bind，并讨论了每种方法的细微差别，感谢@andyb指出这个链接。

jQuery事件委托救援

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

注：.delegate()is more efficient大于.live()

发生这种情况是因为你绑定了一个事件到#testbutton，而#testbutton在文档就绪时位于#container内部。当你清除#container的HTML时，你也会丢失#testbutton绑定的click事件。相反，click事件引用的元素不再存在。
如果您希望按钮事件持续存在，请尝试使用live()绑定或delegate()父元素中的事件。

使用live()

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

将处理程序附加到与当前选择器匹配的所有元素的事件，无论是现在还是将来。

使用delegate()

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

根据一组特定的根元素，将处理程序附加到现在或将来与选择器匹配的所有元素的一个或多个事件。

使用live()函数而不是单击
jsFiddle

live()已弃用。请使用on()，如有必要，请在document级别使用它：

$(function(){ 
    $(document).on("click", "#testbutton", function() {
        alert("Button has been clicked!");
    })
});

通过使用$(document)，重新生成#testbutton时其事件处理程序仍将保持不变。