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

Hammer.js event on dynamically added elements

本文关键字：js 事件 Hammer 添加 元素 动态      更新时间：2023-09-26

我有两次点击的代码：

$(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给了我这个代码，我相信我现在只需要更改一些小事情，但我不知道我到底需要做什么。

有一个官方的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调用之前初始化Hammer，而是在Ajax调用之后（即在成功回调中）初始化Hammer。

相关文章：