javascript - Js点击属性不适用于js加载的html

Question

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

我正在使用

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

不是

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

我面临的问题是这个 js 对前 10 个结果完美地工作，但之后它停止为我附加的 block 工作。

如何让它同时适用于这两种情况？？

Answer 1

试试 jquery on()用于事件委托(delegate)。它也适用于 DOM 上的动态加载元素。

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

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

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