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

Question

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

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

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

score 4 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

从文档：

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

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

$(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 的一个节点/元素。

5 回答 5