jQuery .click（）在使用AJAX添加的动态对象上不起作用

Question

我有一个页面，上面显示一个带有id=button-link 。 在按钮之后，还有另一个id为display-content div。 单击该按钮后，我正在进行AJAX调用，该调用将提取一些内容并将其显示在第二个div中。 这是我正在使用的JavaScript代码：

$('#button-link').click(function(event) {
    event.preventDefault();
    $.ajax({
        url: 'site/someAction',
        success: function(result) {
            $('#display-content').html(result);
        }
    });    
});

$('#secondButton').click(function(event) {
    event.preventDefault();
    $.ajax({
        url: 'site/anotherAction',
        success: function(result) {
            $('#display-content').html(result);
        }
    });    
});

这完全符合预期，我正在#display-content div中加载一些文本和HTML元素。 这些元素之一是另一个ID为#secondButton按钮。 当用户单击第二个按钮时，我想在另一个地方进行另一个AJAX调用，并提取不同的内容以显示在#display-content div中。 但是，这不起作用。 jQuery脚本在页面上，正在正确加载，并且在第一次AJAX调用后HTML元素也正确显示在页面上，但是似乎#secondButton不是DOM的一部分，并且在单击时不会触发click事件它。

知道发生了什么问题以及如何为该动态添加的按钮注册点击事件吗？

Answer 1

您需要使用事件委托 。

注意：如果元素#secondButton可以添加多次，则此操作无效。 您需要针对这种情况使用类 。

对于jQuery 1.7和+

$(document).on('click','#secondButton',function(event) {
    event.preventDefault();
    $.ajax({
        url: 'site/anotherAction',
        success: function(result) {
            $('#display-content').html(result);
        }
    });    
});

对于jQuery 1.7之前的版本

$(document).delegate('#secondButton', 'click',function(event) {
    event.preventDefault();
    $.ajax({
        url: 'site/anotherAction',
        success: function(result) {
            $('#display-content').html(result);
        }
    });    
});