动态元素的AddEventListener？

Question

在我的页面上，当你向右滑动一个元素时，这个元素就会移动。我有以下代码来处理这些刷卡操作：

window.addEventListener("touchstart", touchStart, false);
window.addEventListener("touchmove", touchMove, false);

问题是，它不仅影响我想要的可滑动的元素。相反，如果我在页面上的任何位置滑动，它就会运行touchMove。为了解决这个问题，我尝试了：

var content = document.getElementById("content");
content.addEventListener("touchstart", touchStart, false);
content.addEventListener("touchmove", touchMove, false);

这在某种程度上是有效的，但当在#content上显示一个div (通过用户交互)时，事件仍然会被触发。

我考虑的另一个解决方案是将这些事件绑定到#content中的元素，这些元素应该启用滑动功能。问题是，这些元素是动态添加到页面中的，所以当在页面加载时调用上面的函数时，这些元素不会被考虑在内。然后我考虑使用jQuery的.on()方法，如下所示：

$("#content .row").on("touchmove", touchMove, false);

但这根本不是在调用touchMove。

有没有更好的方法来完成这一切？当事件侦听器仅分配给#content时，在不是#content子级的元素上调用touchMove是否有意义

Answer 1

尝试这种方法，将事件附加到文档并为所需元素提供筛选器。

$(document).on("touchmove", "#content .row", touchMove);

根据评论编辑，你可以这样获取事件

$(document).on("touchmove", "#content .row", function(event){
       alert(event.target.id);
});

Answer 2

$("#content .row").on("touchmove", touchMove, function(){
   // Your code here
});

这里不需要选择器后面的false or true值，因为大多数事件都是使用event bubbling.附加的。在这种情况下，您可以省略这一点并编写处理程序