Dropdown add events #1343

paglias opened this Issue Jan 28, 2012 · 64 comments


None yet

paglias commented Jan 28, 2012

It would be very usefult if Dropdown would have some events like Modal have (show, shown, hide, hidden)


fat commented Jan 28, 2012

Seems odd - what's the usecase?

do custom page ajax load on user click.


pokonski commented Jan 28, 2012

It's better to have a global lib that attaches events to links with data-remote attribute. That's how Rails does it => https://github.com/rails/jquery-ujs/blob/master/src/rails.js#L53 It also gives you all the callbacks you want.

You can obviously use that outside of Rails, it's not framework specific.


fat commented Jan 28, 2012

just listen to the element's click event then - nothing different between that and having a shown event

fat closed this Jan 28, 2012


Use case: Facebook style notification menu. I want to set a timeout when the menu is opened, and clear the timeout if the menu closes before a certain amount of time has passed.

+1 I have a very similar use case and would love to see this added!

@fat: might work for shown, but not for hidden as you can click anywhere to hide the dropdown.

I tried listening to the click event, but it seems that bootstrap returns false in the function that shows the dropdown, so even that is not possible. Perhaps this issue should be re-opened.

vkhater commented Apr 21, 2012

+1 to open this issue again. event.preventDefault() seems to be a better option.

I would just like to see an event for dropdown close.

By the way, a friend suggested I use .on() instead of .click(), and that did the trick.


I want a event for dropdown close as well. The use case is a dropdown with check boxes and a submit button at the end. I want to submit the form if the user clicks the submit button OR if he closes the dropdown.

skeet70 commented May 16, 2012


Click does seem to have some issues with the dropdown, a set of events could be handy for all sort of things, as well as staying consistant across similar bootstrap elements.

Using on/live/click doesn't work on my dropdowns, seems that the click event isn't bubbling past the dropdown toggle. The dblclick event still works (as useful as that is).

Edit: Using both the mousedown and mouseup commands together is a workaround for this.


Another use case: I want to update information on the dropdown when it's opened, pretty much like the tag dropdown on gmail. The checkboxes are already there, but it may be expensive to update them all the time.

volmer commented Jun 5, 2012


An event for dropdown close would be great. An use case: to disable the dropdown itself once the user already read its content.

@fat can we finally reopen this ticket please look at all the +1s! Thanks

rmclain commented Jun 20, 2012

Best way I found to solve this was to remove the data-toggle from the element, and then re-add on your click event. This worked for what I was doing with it which was to load the drop down via ajax so my specific event only needed to be called once.

$(document).on("click", ".class", function(event) {
    // Ajax actions here 
    $(this).attr("data-toggle", "dropdown").click();

I'd also like to see a 'shown' event for the dropdown so I can set focus to a field

jmif commented Jul 4, 2012


This would provide a quick and easy way to focus on a form field upon opening.

mypark commented Jul 25, 2012


Use case: reset input fields in login drop down on close so it doesn't have crud from previous login attempt

mdelbo commented Aug 21, 2012


use case: trigger an ajax load on display

wink commented Aug 28, 2012

+1 Use case: need to fire an analytics ajax call when a user opens and closes the menu.


This would provide a quick and easy way to focus on a form field upon opening.


I would like to know when the menu has been dismissed.


yojeek commented Sep 14, 2012

+1. listen for click is not enought. would be nice to have show/open events .


use case: also to trigger an ajax load on display to load dynamic data in to menu. I'm really surprised there are no events for this plugin.

This only loads the ajax request on the first click for each item for me.

$(document).on("click", ".class", function(event) {
// Ajax actions here
$(this).attr("data-toggle", "dropdown").click();

What do I need to do to load the ajax request on each time the drop down menu is toggled?

FCHAPLIN commented Oct 1, 2012

Need to load an ajax form on click

load the page

Ok so I hacked the plugin to post to the href and populate the menu with the response. Inline data attributes are also posted.


Probably not very elegant but it suits my requirements in the short term without having to write another plugin or find something else.

I'm not so much a jQuery developer so maybe someone can do something better?

brodkin commented Nov 1, 2012

@fat @mdo This is definitely an issue. Please reopen.

+1 Use Case: Facebook notification style menu

domenic commented Dec 5, 2012

+1, need to add a class to the surrounding markup if there's a dropdown open on top of it.

elado commented Dec 18, 2012

+1 for open/close events

+1, reopened this, please.

jbranc commented Dec 26, 2012

need to know when it opens AND closes. click only can get you open, but there are a lot of other events that cause it to close. my particular use-case is to disable tooltips from dropdown title while menu is open - they get in the way

elado commented Dec 26, 2012

@jbranc ha! Was exactly my use case.

jbranc commented Dec 26, 2012

@elado looks like a feature in high demand! FWIW here is a partial workaround. gets rid of it on open, but it still comes back while the menu is open if they hover over again.

    $('.dropdown').on('click', function(e) {

smajl commented Jan 3, 2013

I am now fighting this use case: Focus on input element inside the dropdown upon it is shown.
So it would be absolutely great to have callbacks for these actions.

Use case: Because of the way I have to layer some divs, I'd like to be able to adjust the z-index of them on dropdown open and close. Mine isn't a very common need, probably, but it seems evident that there is a big desire for these events in the community.

+1 for focusing an input inside the dropdown upon being shown.

ssewell commented Jan 15, 2013

Use case: User clicks dropdown trigger, dropdown opens immediately with a indeterminate progress bar, AJAX call is made to populate contents dynamically.

I need access to a "closed" event, so I can repopulate the contents of the dropdown to the original indeterminate progress bar for subsequent requests.

+1 - dropdown contains options (checkboxes etc). Save settings on close event.

tspike commented Jan 24, 2013

+1 @fat @mdo thanks for all your hard work, could please explain why this issue is still closed? My use case: need to fire ajax requests when the dropdown is closed.

+1 I would like to be able to perform an action once the dropdown has been displayed.

I needed this today (again).

tamlyn commented Feb 5, 2013


I read the docs about events and naturally assumed that this event would exist. I've wasted 20 minutes trying to figure out why it wasn't working only to discover there is no event! A simple onclick is not the same as you also have to check if it's an open or a close click and check whether the drop-down has been rendered yet - all things which a show event would encapsulate.

calebl commented Feb 8, 2013

would be great to have an event fired on dropdown hide/close. not having it is making my development much more difficult

pachocho commented Feb 9, 2013

Stil nothing after a year?

rgomesf commented Feb 28, 2013

dropdown hide/close will be very useful

+1 There are many use-cases for this, and given how trivial the addition is compared to the added benefit, it seems a no-brainer.

rochal commented Mar 20, 2013

+1. Need this badly for my minishopping cart.


davewasmer commented Mar 28, 2013

Use case: a dropdown as part of a group of radio buttons. The dropdown starts as "Pick one:", but if they close the dropdown without selecting an item, the dropdown toggle button itself shouldn't stay active. A close event would allow me to remove the active attribute cleanly, whenever the dropdown closes.

sbking commented Apr 7, 2013

Use case: I have a login form inside of a dropdown. I want to:

  • Focus the username field when the dropdown is opened.
  • Clear the form values when the dropdown is closed.

This would be extremely useful for me.

cr0ybot commented Apr 8, 2013

Use case: Tell a jQuery plugin like jqPlot when to draw/replot: http://www.jqplot.com/deploy/dist/examples/hiddenPlotsInTabs.html

It is critical to bind the callback to the UI widgets "show" or "change" method which calls the plots "replot" method. Without this, the plot won't properly redraw itself when it's container becomes visible.

EDIT: I finally found the "shown" event and got it working. Please see http://twitter.github.io/bootstrap/javascript.html#modals and scroll a little ways down to Events.

If you're getting a "modal is not a function" error like I was, check to make sure you aren't loading jQuery AFTER bootstrap.js. I didn't think I was until I realized that I had copy/pasted a second jQuery link in for a plugin.

EDIT 2: I realize now that this is specifically about dropdown menus. Feel free to ignore this entire comment if what I said doesn't apply to dropdowns at all.

tacone commented Apr 15, 2013

The problem with twitter#1343 (comment) is that you can close the dropdown by clicking on any other part of the document. So just listening for clicks on the toggle element won't help.


davewasmer commented Apr 15, 2013

@tacone but the dropdown must setup a listener for that click outside the document, right? Why not just fire an event from inside there?

tacone commented Apr 15, 2013

@davewasmer let's also setup a listener for key presses then, shall the nyancat accidentally land on your escape key.

Here's my workaround. Ugly, but less ugly than hacking the core.


davewasmer commented Apr 15, 2013

@tacone thanks for the example code, but I don't see the ugliness of adding this to the core. Not only would the code be cleaner (just adding a trigger to the existing listeners), it would make the interface consistent with the other JS UI components (i.e. modal, scrollspy, tabs, alerts, collapse, and carousel all fire events).

+1 ... trying to disable tooltips on the link when dropdown is toggled.


cvrebert commented May 30, 2013

Implemented for 3.0.0-wip in #7113 & f3e45c3.

@cvrebert, thank you!

cvrebert locked and limited conversation to collaborators Jun 14, 2014

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.