我有这个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触摸事件时遇到问题,这都是解决方案!

感谢所有(尝试过的)帮助! :)

10-05 20:47
查看更多