Bootstrap dropdown closing when clicked

Question

I put a form inside a bootstrap dropdown, but when I click any of the fields in the form, the dropdown goes away. I have this piece of code but I don't know where to put it to prevent the dropdown disappearing.

$(function test() {
  // Setup drop down menu
  $('.dropdown-toggle').dropdown();

  // Fix input element click problem
  $('.dropdown input, .dropdown label').click(function(e) {
    e.stopPropagation();
  });
});

Could someone please tell me where I should put this? I tried in the bootstrap-dropdown, I tried within the HTML but it still doesn't work.

Answer 1

If you want to stop closing only some of dropdown menu, not all of them, then just add an additional class to your ul block:

<ul class="dropdown-menu keep-open-on-click">

And use this code:

$(document).on('click', '.dropdown-menu', function(e) {
    if ($(this).hasClass('keep-open-on-click')) { e.stopPropagation(); }
});

Answer 2

Time passed since answer had been accepted, but if you want to keep the dropdown opened, if it acts like a kind of dialog, the best way i think is:

$('.dropdown').dropdown().on("hide.bs.dropdown", function(e) {
            if ($.contains(dropdown, e.target)) {
                e.preventDefault();
            //or return false;
            }
        });

Answer 3

Thank you for the above answer, I was having the same issue w/ submenus under the dropdown menus. Using the above solution I was able to solve the problem for this as well.

$('.dropdown-menu .dropdown-submenu a[data-toggle="dropdown-submenu"]').click(function (e)
{                   
    e.stopPropagation();
});

Answer 4

If you look to the bottom of sources of dropdown widget, you will see this:

$(document)
  .on('click.bs.dropdown.data-api', '.dropdown form', function(e) {
    e.stopPropagation()
  })

So you have the following choices:

1. Simply wrap yor dropdown with form
2. Or you can add event listener for click event of .dropdown YOUR_SELECTOR

$(document)
  .on('click.my', '.dropdown some_selector', function(e) {
    e.stopPropagation()
  })

Answer 5

This works for my (lateral sidebar opening a simple link with bootstrap toggle)

$('.dropdown').find("a").not('.dropdown-toggle').on("click",function(e){
    e.stopImmediatePropagation();
});

Answer 6

Put

<script type="text/javascript">
    $('.dropdown-menu').click(function(e) {
          e.stopPropagation();
    });
</script>

on the original answer, remove all the classes, and just put the ".dropdown-menu" class, it worked for me. i have an input field inside the dropdown menu.