Binding events with Hammer.js and .on()

Question

Hammer.js adds javascript touch and gesture support to my web app. My problem lies in using .hammer() with DOM elements that do not exist until an .ajax() call on document ready.

Previously, I've used something like:

$('#parent').on('click', '.child', function(e){
    $(this).hammer()...
});

But, I need to be able to bind the event with Hammer without calling .on() as the .on() event types do not match the Hammer event types. Any help is appreciated - I'm by no means a jQuery genius, nor am I very familiar with event binding.

Answer 1

Give toe.js a try

A by Hammer.js inspired library is toe.js, which uses the jQuery special events API where Hammer.js uses a custom implementation.

So without any further initialization on your elements you should be able to use it like:

$('#parent').on('tap', '.child', function(e){
  // ... Do something
});

I've switched to toe.js because backbone.js uses the standard jQuery events API.

Answer 2

Looking at the jquery.hammer.js source, you should have no problem delegating events.

$("#parent").on("doubletap",".child",dostuff);

just make sure you call .hammer() on the elements when you add them to your page.