如何选择通过javascript添加的元素

Question

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

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

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

Answer 1

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

同样从变更处理程序中返回几乎没有意义，甚至更少，返回警报的结果。

Answer 2

您可以使用下面的event delegation，

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

1. 在执行上述行
时，将文档替换为DOM中存在的任何closeby容器
2. 事件委托将事件绑定到父元素，并在event.target匹配指定的选择器时执行处理程序。

Answer 3

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

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

来自文档：

  

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

Answer 4

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

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

Answer 5

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

 alert("hello"); }
);

您可以使用任何更接近的父元素替换文档，这些元素将始终存在于DOM中以获得更好的性能。像

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

     alert("hello"); 
}
);

如果您使用$（“document”），jQuery将搜索名为document的节点/标记，并且不会找到任何内容，因为document实际上是一个对象。

但你可以使用$（“body”），因为body是DOM的节点/元素。