77

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.

Sorin Cioban
  • 2,237
  • 6
  • 30
  • 36

9 Answers9

125

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>
Andres I Perez
  • 75,075
  • 21
  • 157
  • 138
  • I've placed it in the body and it still won't work, can I just put it after and before my first
    ?
    – Sorin Cioban Jun 02 '12 at 17:14
  • @SorinCioban what form elements are you trying to stop the propagation of the click event from? The top line is only targettin the input and label form elements. Are there other form elements available in your dropdown form? Also, is the `.dropdown-menu` container a parent of your form elements? – Andres I Perez Jun 02 '12 at 19:15
  • 2
    It's fine now. I wasn't placing the script in the right location. Also, I needed that $('.dropdown-toggle').dropdown(); statement because I had a form in the drop down. So without it, the variables would not propagate to $_POST in the script I'm using for the form. – Sorin Cioban Jun 03 '12 at 22:58
  • 1
    any other way to solve this without `e.stopPropagation();`? in my case I have an element inside my dropdown menu that needs a confirm box to appear after it's clicked -- the confirm box doesn't work when this method is active – Gcap Feb 20 '16 at 00:31
10

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(); }
});
o139
  • 854
  • 2
  • 8
  • 20
9

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;
            }
        });
lavrik
  • 1,456
  • 14
  • 25
8

You need to stop event from bubbling up the DOM tree:

$('.dropdown-menu').click(function(e) {
    e.stopPropagation();
});

event.stopPropagation prevents event from reaching the node where it's eventually handled by Bootstrap hiding menu.

Vishnu T Asok
  • 244
  • 4
  • 15
6

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();
});
Burpy Burp
  • 459
  • 3
  • 12
manuelprojects
  • 213
  • 3
  • 10
  • 1
    Thanks! I like this aproach, however I had to use $('dropdown-menu')... to get it working – ESP32 Mar 10 '15 at 21:57
5

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();
});
usugarbage
  • 51
  • 1
  • 1
4

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.

Screenshot of menu

Nathan Tuggy
  • 2,237
  • 27
  • 30
  • 38
River CR Phoenix
  • 311
  • 1
  • 4
  • 15
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()
  })
Frederik Struck-Schøning
  • 12,981
  • 8
  • 59
  • 68
Timofey Novitskiy
  • 161
  • 1
  • 2
  • 5
4

Simply use this example.This solution works for me.

<script type="text/javascript">
window.addEvent('domready',function() {    
   Element.prototype.hide = function() {
      $(function () { 
        // replace your tab id with myTab
        //<ul id="myTab" class="nav nav-tabs">
        $('#myTab li:eq(1) a').tab('show');
      });      
   };
});
</script>

Hope it'll help. Thanks.

Sahar Zehavi
  • 580
  • 6
  • 16
Shiplu
  • 460
  • 6
  • 13