Hammer.js doesn't work

Question

I'm using Hammer.js and I've included Hammer and the Hammer JQuery plugin like this:

<script src='res/stat/js/hammer.js'></script>
<script src='res/stat/js/jquery.hammer.js'></script>

Now, with this code I'm trying to get double tap to work:

<script>
    var element = document.getElementsByClassName('snap_item');
    var hammertime = Hammer(element).on("doubletap", function(event) {
        alert('hello!');
    });   
</script>

The element with classname 'snap_item' exists and is spelled correctly. The path to Hammer.js and the JQ plugin are also correct. I've tested it on the iPhone 5S and it doesn't do anything when I double tap the element.

Does anyone know what's going wrong here? I have JQuery V2 included as well. Is that causing the problem?

Answer 1

document.getElementsByClassName returns an array of elements. The Hammer constructor can only take one element. Initialize each on it's own:

var elements = document.getElementsByClassName('snap_item');

[].slice.call(elements).forEach(function(element) {
    var hammertime = new Hammer(element);
    hammertime.on('doubletap', function(event) {
         alert('hello!');
    });
});

JSFiddle Demo: http://jsfiddle.net/nw6dvgck/