绑定多个动态添加的元素

Question

我正在使用 jQuery Mobile，我需要将一些点击事件绑定到动态添加的内容。似乎我这样做的方式是，我的代码只运行我在代码中附加一个点击事件的最后一个元素。例如，当我单击元素 A 时，此代码将不提示“Hi”，但当我单击元素 B 时，它将提示“Bye”。

我确信这是一个简单的错误，但我一直在用头撞桌子试图弄明白。

$(document).off("tap").on("tap", "#A", function() {
    alert('Hi');
});

$(document).off("tap").on("tap", "#B", function () {
    alert('Bye');
}); 

Answer 1

这是因为您将事件附加到文档，然后在下一行解除绑定。因此，当您在文档上关闭 tap 并再次在文档上为 b 绑定时，您在 A 上的绑定就会丢失。

试试：

$(document).off("tap");
$(document).on("tap", "#A", function() {
    alert('Hi');
});

$(document).on("tap", "#B", function () {
    alert('Bye');
}); 

您也可以将其链接起来，以避免一次又一次地创建 jquery 对象。

$(document).off("tap")
  .on("tap", "#A", function() {
    alert('Hi');
}).on("tap", "#B", function () {
    alert('Bye');
});