twitter typeahead.js: can't invoke click() handler on link within suggestion

Question

I am using Twitter Typeahead.js and am unable to get a JQuery click() handler invoked when a target anchor tag is part of a suggestion template. Please see this jsfiddle demo'ing the problem; excerpt below:

$('body').on('click', '.remove', function (evt) {
    console.log("clicked; currentVal=" + $(this).data('currentVal'));
    return false; //stop click propagation
});

$('#search').typeahead({
    name: 'foo',
    local: ['alpha', 'alfalfa', 'bravo', 'charlie'],
    engine: Hogan,
    template: '<p>{{value}} <a href="#" class="remove" data-current-val="{{value}}">Remove</a></p>'
});

How can I get my click handler invoked (before typeahead's)? thanks!

Answer 1

This is due to a known bug which should get fixed in v0.10.

Answer 2

Alternatively, you can invoke your click handler by binding on it to typeahead:selected.

$('#search').typeahead({
    name: 'foo',
    local: ['alpha', 'alfalfa', 'bravo', 'charlie'],
    engine: Hogan,
    template: '<p>{{value}} <a href="#" class="remove" data-current-val="{{value}}">Remove</a></p>'
}).on('typeahead:selected', function(object, data) {
    //your code goes here.
})