当您删除一个元素然后替换它（通过 javascript）时，它会丢失在页面加载时添加到它的所有事件绑定。

（这也适用于页面加载后添加到页面的内容——即ajax加载的内容）

对此有几种可能的解决方案。

1) 封装您的“绑定”代码，并在页面加载时和相关元素添加回页面后立即调用它。例如：

$(document).ready(function(){
    // bind event handlers when the page loads.
    bindButtonClick();
});

function bindButtonClick(){
    $('.myClickableElement').click(function(){
        ... event handler code ...
    });
}

function updateContent(){
    $.ajax({
        url : '/ajax-endpoint.php',
        data : {'onMyWay' : 'toServer'},
        dataType : 'html',
        type : 'post',
        success : function(responseHtml){
            // .myClickableElement is replaced with new (unbound) html element(s)
            $('#container').html(responseHtml);

            // re-bind event handlers to '.myClickableElement'
            bindButtonClick();  
        }
    });
}

2)更优雅的处理方式：使用jQuery 的 .on() 方法。有了它，您就可以将事件处理程序绑定到事件目标以外的元素——即永远不会从页面中删除的元素。

$(document).ready(function(){
    $('body').on('click','.myClickableElement',function(){
        ... event handler code ....
    });
});

一些进一步的解释：

该.on()方法使用事件委托来告诉父元素保留您的事件处理程序代码（第三个参数），并在事件目标（第二个参数）对其执行某种类型的事件（第一个参数）时触发它。

如果您使用的是 1.7 之前的 jQuery 版本，请使用现在已弃用的委托方法，该方法基本上执行相同的操作。

此外，值得注意的是，由于事件通过 dom 树“冒泡”的方式，事件目标（.on() 方法的第二个参数）必须是委托元素（jQuery 对象的选择器）的后代。例如，以下将不起作用

<div id="container-1">
    <div>
        <div id="another-div">
            Some Stuff
        </div>
    </div>
</div>

<div id="container-2">
    <a id="click-me">Event Target!!!</a>
</div>

<script type="text/javascript">
    $('#container-1').on('click','#click-me',function(){
        ... event handler code ....
        // This will never execute, should've used '#container-2', or 'body', or 'document' instead of '#container-1'
    });
</script>

该body或document元素通常是安全的选择，因为通常每个页面上的元素的后裔。

您可以将事件脚本包含在 DIV 中，并在动态加载内容后运行 Replaceall 命令。

<div class="somescript">
-- Event Script that you want to map with dnamically added content
<div>

-- 动态加载您的内容并在其后运行以下命令。

$(".somescript").replaceAll($(".somescript"));

一旦加载了动态加载的内容并运行了替换命令，事件将被映射并且代码将正常运行。