ajax调用后不会触发jQuery事件

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

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

有几种可能的解决方案。

1）封装您的“绑定”代码，并在页面加载时以及在有问题的元素添加回页面后立即调用它。例如：

$(document).ready(function(){    // bind event handlers when the page loads.    bindButtonClick();});function bindButtonClick(){    $('.myClickableElement').click(function(){        ... event handler pre ...    });}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 pre ....    });});

一些进一步的解释：

该

.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 pre ....        // This will never execute, should've used '#container-2', or 'body', or 'document' instead of '#container-1'    });</script>

该

body

document