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

Answer 1

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 2

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 3

You can omit the dropdown call all together, the bootstrap dropdown works without it. Make sure you're wrapping your script properly, you can include it on the header or body of your page, although personally i prefer placing it on the body of your page.

JS

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