Javascript 为什么jQuery on click事件处理程序对于动态加载的DOM元素不能正常工作？

我在主页的中加载JavaScript文件，然后导航到需要onclick函数的页面。onclick附加到通过AJAX调用随时间动态加载的内容。我尝试接触的元素构造如下：

<a href="#" id="query_2" class="list-group-item query">Alle huurdergegevens</a>

---

当我单击元素时，实际上什么都没有发生。。控制台中没有任何记录，也没有错误。。无法找出我做错了什么tbh..

当您在创建DOM后加载DOM中的任何元素时，您必须使用

on

$(document).on("click",".query",function() {
    var id = $(this).attr('id');
    id = id.replace(/\D/g,'');
    console.log(id);
    exeSQL(id);
});

---

对于动态内容上的事件，必须使用此语法

$(document).on('click','.query',function() {
    var id = $(this).attr('id');
    id = id.replace(/\D/g,'');
    console.log(id);
    exeSQL(id);
});

请参见一个示例：

$（文档）.on（'click'，'myButton'，function（）{
警报（“正常”）
})

---

对于任何像我这样偶然发现这一点的人，以下是我在这里的结局，以及为什么上面的答案解决了这个问题：

• 我正在为我的事件处理程序使用

  body

  ：

  $（'body'）。在（'contextmenu'，'myctl'，函数（e）{

• 我的事件处理程序绑定到动态和静态元素
• 在我的主页中时，事件处理程序正在工作
• 当我将它们移动到外部JS文件时，它们停止工作

顶部答案中的解决方案解决了我的问题，因为它使用

$（文档）

绑定事件处理程序，而不是

$（'body'）

为什么？

移动到

$（文档）

解决此问题的原因是

$（'body'）

实际上不存在于外部JS文件中。通过使用

$（文档）

，JQuery能够将事件处理程序附加到实际存在的东西上，并且事件处理程序重新开始工作

摘要

---

如果在外部JS文件中使用事件处理程序（用于statis或dynamic元素），请使用（…）上的

$（document）.on

而不是（…）上的

$（'body'）。on（…）

我认为您遇到了这个问题，因为您没有将onclick脚本放在document.ready函数中。问题是，由于您动态加载内容，jquery代码不会将单击事件添加到加载的元素中。您需要在加载完内容后附加单击侦听器，或者您可以使用Sagar Arora的答案。：）谢谢，成功了！您能详细谈谈这是如何工作的吗？@LaurensMäkel，因为您的内容是动态加载的，所以在这种情况下，我们必须使用$（文档）与直接选择器元素不同。@LaurensMäkel，请查看文档。

提供选择器时，事件处理程序称为委派。

-->

委派事件的优点是，它们可以处理来自后代元素的事件，这些元素稍后添加到文档中。

$(document).on('click','.query',function() {
    var id = $(this).attr('id');
    id = id.replace(/\D/g,'');
    console.log(id);
    exeSQL(id);
});