ajax调用后Jquery事件不会触发

当您移除一个元素，然后(通过javascript)替换它时，它将丢失在页面加载时添加到它的所有事件绑定.

(这也适用于页面加载后添加到页面的内容-即Ajax加载的内容)

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

1) Encapsulate your "binding" code and call it both on page load and immediately after the element in question gets added back to the page. For example:

$(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) The more elegant way to handle this: use jQuery's .on() method. With it, you are able to bind event handlers to elements other than the event target - i.e. an element that never gets removed from the page.

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

Some further explanation:

The .on() method uses event delegation to tell a parent element to retain your event handler code (3rd argument), and fire it when the event target (2nd argument) has a certain type of event (1st argument) performed on it.

If you are using a version of jQuery prior to 1.7 use the now deprecated delegate method which essentially does the same thing.

另外，值得注意的是，由于事件在dom树中"冒泡"的方式，事件目标(on()方法的第二个参数)必须是委托元素(jQuery对象的 Select 器)的后代.例如，the following would NOT work

<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个元素通常是安全的 Select ，因为页面上的每个元素通常都是后代.