Avoid dropdown menu close on click inside

Avoid dropdown menu close on click inside

I have a Twitter Bootstrap dropdown menu. As all Twitter Bootstrap users know, the dropdown menu closes on click (even clicking inside it).
To avoid this, I can easily attach a click event handler on the dropdown menu and simply add the famous event.stopPropagation().

This looks easy and a very common behavior, however, and since carousel-controls (as well as carousel indicators) event handlers are delegated to the document object, the click event on these elements (prev/next controls, …) will be “ignored”.
$(‘ul.dropdown-menu.mega-dropdown-menu’).on(‘click’, function(event){
// The event won’t be propagated up to the document NODE and
// therefore delegated events won’t be fired

Relying on Twitter Bootstrap dropdown hide/hidden events is not a solution for the following reasons:

The provided event object for both event handlers does not give reference to the clicked element
I don’t have control over the dropdown menu content so adding a flag class or attribute is not possible

This fiddle is the normal behavior and this fiddle is with event.stopPropagation() added.
Thanks to Roman for his answer. I also found an answer that you can find below.


Solution 1:

Removing the data attribute data-toggle="dropdown" and implementing the open/close of the dropdown can be a solution.

First by handling the click on the link to open/close the dropdown like this :

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

and then listening the clicks outside of the dropdown to close it like this :

$('body').on('click', function (e) {
    if (!$('li.dropdown.mega-dropdown').is(e.target) 
        && $('li.dropdown.mega-dropdown').has(e.target).length === 0 
        && $('.open').has(e.target).length === 0
    ) {

Here is the demo :

Solution 2:

This should help as well

$(document).on('click', 'someyourContainer .dropdown-menu', function (e) {

Solution 3:

Bootstrap provides the following function:

                 | This event is fired immediately when the hide instance method 
hide.bs.dropdown | has been called. The toggling anchor element is available as the 
                 | relatedTarget property of the event.

Therefore, implementing this function should be able to disable the dropdown from closing.

$('#myDropdown').on('hide.bs.dropdown', function (e) {
    var target = $(e.target);
    if(target.hasClass("keepopen") || target.parents(".keepopen").length){
        return false; // returning false should stop the dropdown from hiding.
        return true;

Solution 4:

The absolute best answer is to put a form tag after the class dropdown-menu

so your code is

<ul class="dropdown-menu">
      <div class="menu-item">bla bla bla</div>

Solution 5:

I also found a solution.

Assuming that the Twitter Bootstrap Components related events handlers are delegated to the document object, I loop the attached handlers and check if the current clicked element (or one of its parents) is concerned by a delegated event.

$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
    var events = $._data(document, 'events') || {};
    events = events.click || [];
    for(var i = 0; i < events.length; i++) {
        if(events[i].selector) {

            //Check if the clicked element matches the event selector
            if($(event.target).is(events[i].selector)) {
                events[i].handler.call(event.target, event);

            // Check if any of the clicked element parents matches the 
            // delegated event selector (Emulating propagation)
                events[i].handler.call(this, event);
    event.stopPropagation(); //Always stop propagation

Hope it helps any one looking for a similar solution.

Thank you all for your help.

Solution 6:

$('body').on("click", ".dropdown-menu", function (e) {
    $(this).parent().is(".open") && e.stopPropagation();

This may work for any conditions.

Related:  addEventListener, “change” and option selection