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

我在我的主页加载我的JavaScript文件，然后导航到需要onclick函数的页面。 onclick附加到通过AJAX调用随时间动态加载的内容。我试图达到的元素构成，如：为什么jQuery on-click事件处理程序对于动态加载的DOM元素无法正常工作？

<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); 
});

当我点击该元素，从字面上没有任何反应..登录控制台没事，没有错误藏汉..想不通我做错了什么TBH ..

来源

2017-03-07 Laurens Mäkel

我认为你有这个问题，因为你还没有把document.ready函数中的onclick脚本。 –

问题是，因为您动态加载内容，您的jQuery代码不会将点击事件添加到加载的元素。在完成加载内容之后，您需要附加点击监听器，或者您可以使用Sagar Arora的答案。 :) – Fissio

，当你在DOM DOM后加载任何元素创建，那么你必须处理点击这样的事件使用on

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

来源

2017-03-07 09:52:44

谢谢，这样做了！你能否就这个如何运作...？ –

............. + 1 –

@LaurensMäkel因为您的内容是动态加载的，所以在这种情况下，我们必须使用$（document）而不是直接选择元素。 –

你必须使用这个语法事件的动态内容

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

看到一个例子：

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

<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>

来源

2017-03-07 09:56:55 AchrafGounane

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

回答

相关问题