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

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中的任何元素时,您必须使用with来处理这样的单击事件 on

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