Several elements respond to a touch event on mobile Webkit and Hammer JS

Question

I am working on a small project using the Hammer JS library, and I had a problem with the Chrome Dev Tools emulator and when debugging on two iOS 7 devices. It seems to work fine on desktop browsers. Fiddle here: http://jsfiddle.net/w80baz5g/5/ and more details below.

I have a group of elements, for example:

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

and Hammer JS, listening to a crane event:

 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); }); 

While everything seems fine on desktop browsers (Chrome, Safari), on a mobile phone, only the first of the three elements seems to respond to a click event, but does the console show that it is responsible for all three elements? The second and third elements do not react at all.

Spell here: http://jsfiddle.net/w80baz5g/5/

Am I missing something? Are these events / elements related to other browsers? Why don't they respond individually to the tap event?

Help rate!

Answer 1

Instead:

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

Try using:

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

Or:

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

And let's see what happens.