javascript - 动态添加元素上的 Hammer.js 事件

Question

我有双击的代码:

$(document).ready(function() {
    $('body').scrollTop(50);

    var elements = document.getElementsByClassName('snap_img');

    [].slice.call(elements).forEach(function(element) {
        var hammertime = new Hammer(element),
        img_src = element.getAttribute('src');
        hammertime.on('doubletap', function(event) {
            $(element).next().hide().fadeIn().delay(250).fadeOut();
        });
    });
});

但是由于双击元素 (.snap_img) 是通过 AJAX 调用动态创建的，因此我需要使用事件委托(delegate)，因为当我现在双击 snap_img 元素时，事件不会被触发。

使用 Hammer JQuery 插件，我试图让它发挥作用:

// define options and event handlers in an outer scope
    // this avoids re-defining the event handler for every <img> you create

    var snapImgOptions = {
        enable: true;
    };

    var snapImgEvents = {
        doubletap: function () {
            $(this).next().hide().fadeIn().delay(250).fadeOut();
        }
    };

    function createSnapImgs(data) {
        $.each(data, function (i, item) {
            $('<img class="snap_img">', {src: item}).appendTo("body")
            .hammer(snapImgOptions).on(snapImgEvents);
        });
    }

    // later, your Ajax call...
    $.post( "http://localhost/snapll_back/snap/me_snaps.php?id="+url_user_id,
    function(info) {        
        if(info != "Something went wrong. ERROR{1_RAI_ERROR}" || info != "index.html") {
            $("#snaps").html(info);
        }
        else {
            $('#warning').html(info).fadeIn(200);
        }
    }).done(createSnapImgs);
    return false;

这根本没有任何作用，我也不知道为什么。用户 @Tomalak 给了我这段代码，我确信我现在只需要更改一些小东西，但我只是看不出我到底需要做什么。

Answer 1

官方有jQuery plugin这就是你所需要的。

// define options and event handlers in an outer scope
// this avoids re-defining the event handler for every <img> you create

var snapImgOptions = {
        enable: true;
    };

var snapImgEvents = {
    doubletap: function () {
        $(this).next().hide().fadeIn().delay(250).fadeOut();          
    }
};

function createSnapImgs(data) {
    $.each(data, function (i, item) {
        $('<img class="snap_img">', {src: item}).appendTo("body")
        .hammer(snapImgOptions).on(snapImgEvents);
    });
}

// later, your Ajax call...
$.get("/url/of/the/imageData").done(createSnapImgs);

主要区别在于，此代码不是在 Ajax 调用之前初始化 Hammer，而是在 Ajax 调用之后(即在成功回调中)初始化 Hammer。