我有这个HTML结构:
<div id="snaps">
<div class="snap_item">
<div class="snap_item_following_info">
<img class="snap_item_following_img" src="res/stat/img/user/profile/small/1.fw.png" alt="@JohnDoe" />
<a class="snap_item_following_name" href="#">@JohnDoe</a>
</div>
<img class="snap_img" src="res/stat/img/user/snap/43/2.fw.png" alt="@ErolSimsir" />
<div class="like_heart"></div>
<div class="snap_info">
<div class="snap_text">
Image caption
<a class="snap_text_hashtah" href="@">#LA_city_trip</a>
</div>
<div class="snap_sub_info">
<span class="snap_time">56 minutes ago</span>
<div class="like inactive_like">
<div class="like_icon"></div>
<div class="like_no_active">5477</div>
</div>
</div>
</div>
</div>
</div>
div'#snaps'是一个静态div,其中包含通过JQuery .html()函数添加的所有'.snap_item'元素。因此,将'.snap_item'元素动态添加到div'#snaps'中,如下所示:
<div id="snaps"><!-- static div that holds the dynamic elements -->
<div class="snap_item"><!-- dynamically added element -->
<img class="snap_img" src="..." alt="..." /><!-- when this element is double tapped, the event should be fired -->
</div>
</div>
当用户双击“.snap_img”时,必须发生一些事情。元素“.snap_img”位于“.snap_item”元素内。
到目前为止,我有:
$('#snaps').find('.snap_item').hammer().on({
doubletap : function(event){
alert("doubletap!");
}
});
这根本不起作用。 on()函数应允许我在动态添加的HTML上触发事件,但是此代码不起作用。我有来自this SO question的代码
我包括了Hammer.js,jquery_hammer_plugin.js和query.specialevent.hammer.js。因此,所有必需的JS文件都已包括在内,但还是没有运气。
我该如何工作?
最佳答案
好的,所以我通过使用以下代码解决了这个问题:
$('#snaps').hammer({domEvents:true}).on("doubletap", ".snap_img", function() {
alert("doubletap!");
});
因此,无论谁在动态添加HTML上触发Hammer触摸事件时遇到问题,这都是解决方案!
感谢所有(尝试过的)帮助! :)