Mehrere Elemente reagieren auf Touch-Ereignis auf mobilen Webkit und Hammer JS

Question

Ich arbeite an einem kleinen Nebenprojekt mit der Hammer JS-Bibliothek und ich hatte ein Problem mit Chrome Dev Tools Emulator und Debugging auf zwei iOS 7-Geräten . Es scheint auf Desktop-Browsern gut zu funktionieren. Geige hier: http://jsfiddle.net/w80baz5g/5/ und weitere Informationen unten.

Ich habe eine Gruppe von Elementen, wie folgt aus:

<div> 
    <img class="item" id="item0" src="http://placehold.it/300x300"> 
    <img class="item" id="item1" src="http://placehold.it/300x300"> 
    <img class="item" id="item2" src="http://placehold.it/300x300"> 
</div> 

und Hammer JS zu einem Antippereignis hören:

function initItems(el) { 
    var itemToTap = new Hammer.Manager(el, itemOptions); 
      itemToTap.add(new Hammer.Tap()); 
      itemToTap.on("tap", function(event) { 
       console.log("tapped: " + event.target); 
     }); 

} 

$(".item").each(function(){ 
    var itemToInit = $(this)[0]; 
    initItems(itemToInit); 
}); 

Während in Desktop-Browsern (Chrome, Safari) alles in Ordnung scheint Auf Mobilgeräten scheint nur das erste von drei Elementen auf das Antippen-Ereignis zu reagieren, aber die Konsole zeigt, dass es auf alle drei Elemente reagiert. Das zweite und dritte Element reagieren überhaupt nicht.

Fiddle hier: http://jsfiddle.net/w80baz5g/5/

bin ich etwas fehlt? Werden diese Ereignisse/Elemente von mobilen Browsern anders behandelt? Warum reagieren sie nicht individuell auf ein Tippereignis?

Hilfe sehr geschätzt!

Answer 1

Statt:

$(".item").each(function(){ 
    var itemToInit = $(this)[0]; 
    initItems(itemToInit); 
}); 

Versuchen Sie es mit:

$(".item[id^='item']")... 

Oder:

$("[id^='item']")... 

Und sehen, was passiert.