使用 MutationObserver 使 jQuery 识别新按钮的属性（通过 ajax 插入）

Question

我试图在单击通过 ajax 插入到 div 中的按钮时触发事件。我的按钮有 class btn.

下面的代码仅适用于 DOM:

中已有的按钮

$('.btn').click(function(){
    alert('It works!');
});

我正在使用 MDN 中的 MutationObserver 示例来识别已对我的 div 创建了一个新的子节点，并且我确实在我的控制台中收到了响应：A child node has been added or removed.

如何使 jQuery 也能识别此子节点及其属性，以便我可以使用插入的按钮触发事件？

Answer 1

您只需要使用 .on() 方法：

$('.btn').on("click", (function(){
    alert('It works!');
});

Answer 2

正如 wOxxOm 所述，我必须使用事件委托才能使其正常工作。

$('#divID').on('click','.btn', (function(){
    alert('It works!');
});

use MutationObserver to make jQuery recognize attribute of new button (inserted via ajax)