如何选择通过javascript添加的元素[重复]答案

【问题标题】：How to select elements added via javascript [duplicate]如何选择通过javascript添加的元素[重复]
【发布时间】：2013-08-23 14:14:04
【问题描述】：

我有一个简单的代码来检查选择更改并提醒消息。这工作正常，但是当我在页面上插入新的.select-payment 元素时，此方法仅适用于第一个元素，而不适用于通过 javascript 创建的元素

$(document).ready(function() {
  return $(".select-payment").on("change", function() {
    return alert("hello");
  });
});

知道如何使它适用于加载页面后添加的具有.select-payment 类的任何元素吗？

【问题讨论】：

你以前检查过这个吗？ api.jquery.com/on - 另外，通过 javascript 添加了哪些元素？在使用“on”来委派侦听器时要知道这一点很重要
有点令人不安的是，高级用户跳到回答网站上最常见的问题之一，而不是投票结束......
我认为这个问题的答案是 $(".select-payment").live("change",function)，但所有聪明人似乎都同意 $(document).on 。有什么区别？
@Matt .live() 已被弃用很长时间，甚至已从最新版本中删除。

【解决方案1】：

$(document).on("change", ".select-payment", function() {
    alert("hello");
});

同样从更改处理程序中返回几乎没有意义，更不用说返回警报结果了。

【讨论】：

【解决方案2】：

你可以像下面这样使用event delegation，

$(document).on('change', '.select-payment', function () {..

【讨论】：

【解决方案3】：

定位动态创建的元素时，需要使用.on()的委托语法：

 $(document).on("change", ".select-payment", function() {

来自文档：

事件处理程序仅绑定到当前选定的元素；他们在您的代码调用 .on() 时必须存在于页面上。为了确保元素存在并且可以被选择，执行事件绑定在文档就绪处理程序中的元素页面上的 HTML 标记。如果新的 HTML 被注入到页面中，在新的 HTML 之后选择元素并附加事件处理程序放入页面中。

【讨论】：

【解决方案4】：

你为什么要放 return 声明？您必须将事件处理程序附加到文档，而不是现有的 .select-payment。

试试这个：$(document).on("change",".select-payment",function(){...});

【讨论】：

【解决方案5】：

$(document).on("change", ".select-payment", function () {

 alert("hello"); }
);

您可以将文档替换为任何更接近的父元素，该元素将始终存在于 DOM 中以获得更好的性能。喜欢

$('#closestId').on("change", ".select-payment", function () { 

     alert("hello"); 
}
);

如果你使用 $("document") jQuery 将搜索一个名为 document like 的节点/标签，但不会找到任何东西，因为 document 实际上是一个对象。

但是你可以使用 $("body") 因为 body 是 DOM 的一个节点/元素。

【讨论】：