将 .on() 与动态添加的元素一起使用时出现问题 [重复]

Posted 2023-02-21

【中文标题】将 .on() 与动态添加的元素一起使用时出现问题 [重复]

【英文标题】：Problems Using .on() with Dynamically Added Elements [duplicate]

【发布时间】：2014-11-25 16:26:13

【问题描述】：

我读到.live() 已被弃用，我应该改用.on。但.on 似乎不适用于添加到 DOM 的元素。

我的脚本添加了一个包含任意数量文本框 (input type="text") 的表格，并且我想在任何这些文本框中的内容发生变化时运行一些脚本。

这是我的代码的一部分。 vendorsPopUp 引用了包含我的表格的 div。

$('input', vendorsPopUp).on('change', function (e) 
    alert($(this).attr('class'));
);

但是当文本框中的内容发生变化时，这段代码不会运行。

【问题讨论】：

您在表格或正文或 div 上调用 on()，而不是没有子元素的输入。 on() 使用一个父容器来监视它下面的任何元素的事件，而不仅仅是在绑定时找到的少数元素；这就是为什么它需要额外的选择器参数。现在，您在传统模式下使用 on()。

许多其他问题的重复。我现在去找一个副本。

@dandavis 不是传统模式，处于直接绑定模式。直接绑定到元素没有任何遗留问题。

有人投了我的票，因为这个问题已经被问过了？我做了很多搜索。对不起，我只是没有找到正确的数据。如果它作为副本关闭，那很好。但是投反对票的人看起来就像个混蛋。

legacy 可能是贬义的，但是没有委托的 on() 没有任何优势，并且可能会误导期望子选择器的编码人员。如果没有委托，您不妨使用更具语义的 .change() 处理程序。

【参考方案1】：

应该是这样的

$(vendorsPopUp).on('change', 'input', function (e) 
   alert($(this).attr('class'));
);

【讨论】：

这是正确的答案。它清晰简洁，并且有我需要的代码。如果问题作为副本关闭，那很好。但我不知道为什么有些人如此热衷于投票。尤其是那些没有评论就这样做的人。