使用 JQuery ajax 在 DOM 操作后附加事件

Posted 2023-05-09

【中文标题】使用 JQuery ajax 在 DOM 操作后附加事件

【英文标题】：Attaching events after DOM manipulation using JQuery ajax

【发布时间】：2013-08-27 04:55:52

【问题描述】：

如何在使用 ajax 响应操作 dom 后附加所有事件。我有一个 ajax 请求，它得到一个 html 响应，它基本上是 html 的一个片段。该片段 HTML 有很多按钮。我想刷新 dom，因此之前声明和附加的事件也将应用到该片段中。我不想继续使用 jquery on() 为每个按钮添加每个事件。不然怎么办？

【问题讨论】：

jQuery event delegation的可能重复

@EvanTrimboli - 这个问题不是那个问题的重复。解决方法可能类似，但问题不一样。

真的需要另一个答案来解释事件委托的工作原理吗？

@EvanTrimboli - 按照我的理解，当与其他地方提出的问题相同时，您会将某些内容标记为重复项。这与您作为 dup 提出的问题不同。仅仅因为它们都可以得到类似的答案并不意味着它们是重复的问题。

【参考方案1】：

您可以使用提前设置的委托事件处理，并且可以将其应用于新添加的 DOM 元素。委托事件处理由.on() 完成，通常采用以下形式：

$("static parent selector").on('click', 'selector for dynamic element', fn);

没有干净的方法可以再次运行您的事件安装代码并使其仅适用于新添加的 DOM 元素。您必须将该代码放入一个函数中并对其进行编码，使其不会多次添加事件处理程序，然后您可以在将项目添加到 DOM 后再次调用该函数。或者，您可以让函数接受父对象的参数，并且只在新添加的 DOM 层次结构中添加事件处理程序。

这是关于委托事件处理的另一个相关答案：Does jQuery.on() work for elements that are added after the event handler is created?