防止单击提前关闭数据集

Question

I'm using the Typeahead library with a custom template in the results. The results contain a clickable link that should expand an element within the results. I am using jQuery.on to attach the click event handler to this element. When I click the element, the typeahead selected event is fired and the dataset box closes. I've tried adding e.stopPropagation() to the click event, but it doesn't appear to work.

The goal is to keep the typeahead tt-dataset search results box open when this link is clicked. Should I be doing this differently?

EDIT: I'm using bloodhound as the typeahead source

$(document).on('click', '.mylink', function(e) {

    if ($(e.target).is('.mylink')) {
        //don't close the search results.  this isn't working
        e.stopPropagation();
        //show div
    }   

});

html template for the tt-dataset (I want the mylink anchor to keep the typeahead box open):

<script id="search-template" type="text/x-handlebars-template">    
    <div>
        <strong>{{value}}</strong>
        <span><a href="javascript:;;" class="mylink">show</a></span>
        <div style="display:none">show this</div>
    </div>
</script>

Answer 1

According to JQuery API docs

Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events.

So that explains your problem.

It is not elegant, but waiting for typeahead to create the suggestions in the DOM and THEN attaching an event handler on click works:

http://jsbin.com/subupe/8/

Edit You might also use plain JavaScript with the onClick handler. This should work regardless of the source of your autocomplete suggestions.

function dontClose(e) {
console.log('Dont close');
 e = e || event;
if (e.bubbles && e.stopPropagation) {
    e.stopPropagation();
}
else {   // all other browsers
    e.cancelBubble = true;
}

console.log($(e.target).text()); // do stuff with the target

return false;  

}

/* ... */
templates : {
            suggestion: Handlebars.compile('<p><strong>{{value}}</strong></p><span><a href="javascript:;;" onClick="dontClose()" class="mylink">show</a></span><div style="display:none">show thisaa</div>')
      }

Updated jsbin: http://jsbin.com/subupe/9/