从ajax加载的元素中检测.click（）

Question

我有一个使用ajax加载到我的页面的按钮：

<button id="submit">Submit</button>

我在加载按钮的页面上使用此代码：

<script type="text/javascript">
$(function() {
  $("button#submit").click(function(){
    alert('Submit Clicked');
  });
});
</script>

为什么没有检测到ajax内容中的点击？

Answer 1

当你附加click事件时，你将它附加到DOM中的现有元素，当ajax内容到来时，会创建新的DOM元素并且事件没有附加到它们。

一种选择是以一种方式（但不推荐）使用事件委托来使用文档来读取事件

$(document).on('click', 'button#submit', function(){
    //do something
});

更好的方法是将委托放到获取新内容的元素中，让我们假设是一个带有id formElement的表单，它就像是

$("#formElement").on('click', 'button#submit', function(){
    //do something
});

使用该事件委托，来自ajax的新内容将触发click事件。

PD如果你在元素中有一个ID只是使用id，比如#submit，它会生成一个比tag＃id更快的选择器，因为它使用了getElementById internaly

Answer 2

在代码中，您在创建按钮之前已将事件处理程序附加到按钮。之后您需要附加处理程序。在创建按钮后，在ajax success（）函数中添加处理程序，一切都会正常工作。

Answer 3

因为它动态添加了按钮。为了你必须使用on（）方法，请尝试以下

$(document).on('click', 'button#submit', function(){

alert("hi");
});