Javascript jQuery.click（）不处理使用AJAX添加的动态对象

我有一个页面，上面显示一个按钮，上面有

id=button链接

。按钮后面还有一个div，id为

display content

。单击按钮后，我正在进行一个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的一部分，单击它时不会触发单击事件

知道哪里出了问题，以及如何为这个动态添加的按钮注册单击事件吗？

您需要使用

注意：如果可以多次添加元素

#secondButton

，则此操作无效。对于这种情况，您需要使用类

对于jQuery1.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);
        }
    });    
});

---

是的，这是有效的，正如描述中所提到的，它也涵盖了将来添加的元素。谢谢大家!@mmvsbg注意：如果可以多次添加元素#secondButton，则此操作无效。在这种情况下，您需要使用类。因为id在页面中应该是唯一的。是的，我很清楚这一点，我将确保只有一个#secondButton id。干杯！