Jquery代码不在页面加载时不存在的元素上执行

Question

我有一个在页面加载时加载javascript的Web应用程序：

$(function() {
  $('.modal-delete').click(function() {
    alert();
  });
});

我有一个带有一系列按钮的html页面，当它们被点击时会提醒空白消息框：

<button class="modal-delete btn danger"></button>

工作正常。

然而，有一些AJAX调用生成更多按钮，就像上面那些，但不是页面加载！它们可以随时创建。这些按钮不会执行任何操作，但它们用于加载警报。它们是相同的但是因为它们在页面加载时从不存在，所以Jquery代码不适用于这些按钮。如何将相同的代码附加到这些按钮？

非常感谢:)。

Answer 1

我想你会想要jQuery的'live（）'函数：

$('.modal-delete').live('click', function() { 
  alert(); 
}); 

这将绑定到匹配的元素，但在将来添加新元素时也会重新绑定：

“为现在和将来与当前选择器匹配的所有元素附加事件处理程序”

Answer 2

将准备好的代码更改为此...

$(function() {
  $("document").on("click", ".modal-delete", function() {
    alert("click");
  });
});