绑定多个动态添加的元素

Question

我正在使用jQuery Mobile，并且需要将一些tap事件绑定到动态添加的内容。 看来，我这样做的方式是，我的代码仅运行我在代码内部附加了tap事件的最后一个元素。 例如，当我单击元素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');
});