動態添加的元素上的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調用動態創建的，因此我需要使用事件委托，因為當我雙擊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插件可以滿足您的需求。

// 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調用之前而是在Ajax調用之后（即在成功回調中）初始化Hammer。