Question

我创建了一个动态页面，默认情况下我在其中加载10个元素。之后，如果用户滚动doun我正在通过js将更多元素添加到此页面（通过ajax附加数据）。点击标签我正在做一些js工作

我正在使用

$('.atnd_modal').click(function(){
 alert("dsfds");
 });

不是

 onclick ="function()" and i dont want to do that onclick.

问题我面临的问题是这个js在前10个结果中完全正常工作但在此之后它停止了为js附加的块工作。

如何才能同时处理这两种情况？

Answer 1

尝试使用jquery on()进行事件委派。它也适用于DOM上的动态加载元素。

$('body').on('click','.atnd_modal', function(){
   alert("dsfds");
});

委派活动的优势在于他们可以处理来自的活动稍后添加到文档中的后代元素。

您的点击事件无效，因为当您使用click()时，它会将此处理程序附加到具有atnd_modal类的所有元素，但是当DOM中的新元素加载时该事件未附加自动使用新元素。对于以前的元素，它将工作正常，但对于新元素，它不会。所以这里有委托活动。我们将使用on()或delegate()

将事件附加到父元素

Answer 2

如果要将事件绑定到动态添加的新元素，则必须使用事件委派： -

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序。

像这样更改代码，使用Jquery On

 $('body').on('click','.atnd_modal', function(){
   alert("dsfds");
 });

Js点击属性不适用于js

2 个答案: