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 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。

关于动态添加元素的Hammer.js事件

1 个答案: