Question

我将JavaScript文件加载到我的主页，然后导航到我需要onclick功能的页面。 onclick附加到通过AJAX调用随时间动态加载的内容。我试图达到的元素构造如下：

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

在我的JavaScript文件中，我写了这个：

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

当我点击元素时，字面上没有任何反应..控制台中没有任何内容，也没有错误。也无法弄清楚我做错了什么...

Answer 1

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

处理这样的点击事件

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

Answer 2

您必须将此语法用于动态内容上的事件

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

查看示例：

＆＃13;

$(document).on('click', '#myButton', function(){
  alert('ok')
})

＆＃13;

<html>
  <head>
  </head>
  <body>
    <input type="submit" id="myButton"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">         </script>
  </body>
</html>

＆＃13;

Answer 3

对于像我一样偶然发现此问题的人，以下是我到这里来的方式以及为什么最佳答案可以解决问题的原因：

我将body用于事件处理程序：$('body').on('contextmenu', '#myctl', function(e) {
我的事件处理程序绑定到 dynamic 和 static 元素
事件处理程序在我的主页上正常工作
当我将它们移至外部 JS文件时，它们停止工作

最上面的答案中的解决方案解决了我的问题，因为它使用$(document)而不是$('body')来绑定事件处理程序。

为什么？

移至$(document)可以解决此问题的原因是，$('body')在外部JS文件中实际上并不存在。通过使用$(document)，JQuery可以将事件处理程序附加到实际存在的内容上，然后事件处理程序将重新开始工作。

摘要

如果在外部JS文件中使用事件处理程序（用于状态或动态元素），请使用$(document).on(...)而不是$('body').on(...)。

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

3 个答案: