动态元素的AddEventListener?

时间:2012-10-20 00:31:31

标签: javascript jquery ios

在我的页面上,当您向右滑动元素时,元素将移动。我有以下代码来处理这些滑动:

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

有没有更好的方法来做所有这些?当事件监听器仅被分配给touchMove时,#content是否会被调用#content而不是{{1}}的子元素?

2 个答案:

答案 0 :(得分:1)

通过将事件附加到文档并为所需元素提供过滤器来尝试这种方式。

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

根据评论进行编辑,您可以通过这种方式获取活动

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

答案 1 :(得分:0)

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

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