Twitter Bootstrap Dropdown with Tags Selector

Go To StackoverFlow.com

4

I have a question with Twitter Bootstrap, I'm using the Dropdown plugin and I'm trying to create a tag selector, I created an example in this link:

http://jsfiddle.net/gatnc/

I've tried this:

event.stopPropagation;
return false;

Does anyone have a better solution that does not close the dropdown when selecting a tag?

Note: Click on "New Tag".

Thanks!

2012-04-03 21:52
by Caio Tarifa


3

This works:

$('.dropdown-menu').on('click', 'li', function(event){...});

Updated jsFiddle

2012-04-03 22:44
by dgilland
Thx guy! Works perfectly - Caio Tarifa 2012-04-03 22:49
Hey @dgilland, can you help me with something else? Click exactly on the input, it will not be selected.

EDIT: Fixed! http://jsfiddle.net/gatnc/5 - Caio Tarifa 2012-04-03 23:00

Awesome - no idea how google suggested this page first from the query 'intercept dropdown anchor' but this is exactly what I was looking for - mtkd 2012-04-15 12:00


1

The problem with "live" it's bound to the document. This means the close event won't get intercepted by stopPropagation. If you're using jQuery 1.7.1, you can swap out "live" for "on", like so:

$('.dropdown-menu li').on('click', function(event) {

That'll bind the event to the element, and then things like stopPropagation will work.

2012-04-03 22:10
by Mike Robinson
I think what Mike meant to say is that with live(), the event is bound to the document so event.stopPropagation() doesn't get fired until it's too late - AlienWebguy 2012-04-03 22:13
@AlienWebguy Good catch, have an upvote while I steal your correctio - Mike Robinson 2012-04-03 22:20
@MikeRobinson, thanks! But don't work when I click in "New Tag" and then click on the tag was added, the dropdown disappear. http://jsfiddle.net/gatnc/2 - Caio Tarifa 2012-04-03 22:34