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, событие не запускается.

С плагином Молоток 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 (т.е. в обратном вызове успеха).