Why is binding hammer.js to document body not working?

Question

I want to use hammer.js to capture mobile touch inputs. As some elements (e.g., some 'li') are dynamically generated, I want to bind the hammer object to document itself, and use a selector to capture the events.

var hammer=Hammer(document.body);
hammer.on("release",'.touchzone',function(ev){
  alert(ev.gesture);
});

The code above doesn't work - there is no alert and the function is not entered. However, I directly attached the hammer object to the element div.touchzone could work.

var hammer=Hammer($('.touchzone')[0]);
hammer.on("release", function(ev){alert(ev.gesture);});

I use jQuery 1.11.0, and the v1.0.9 hammer.min.js (with size of ~13kb).

What could be the possible reason?

Answer 1

It's probably because $('.touchzone')[0] return a native DOM object, not a jQuery object.

To apply jQuery along with Hammer, you can make use of jQuery Hammer plugin.

Include it after jQuery, then you can do:

$(document.body).hammer().on('release', '.touchzone', function(ev){
    alert(ev.gesture);
});