Twitter Bootstrap can not stop the dropdown from closing by clicking

Question

I looked at other issues similar to and many of them, but no one worked. Here is the problem: this is a mini login form for the top banner. I need the button to not close automatically when clicked in the fields. Here is my code:

<script> $(document).on('click', '.dropdown-menu', function(e){ $(this).hasClass('keep_open') && e.stopPropagation(); // This replace if conditional. }); ​</script> <div class="btn-group" > <a class="btn btn-small btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"> <i class="cus-key"></i> Login <span class="caret"></span> </a> <ul class="dropdown-menu pull-right keep_open"> <form action="clog.php" method="post" class="keep_open"> <!-- dropdown menu links --> <li><input type="text" placeholder="Username..." class="keep_open" /></li> <li><input type="text" placeholder="Password..." class="keep_open"/></li> <li><input type="submit" name="submit" style="background-image: url('img/login.png'); width: 110px; height: 32px; cursor: hand; margin-top: -5px" value=" " /></li> <li><a href="/riders/register.php" ><span style="color: green; float: right" > Sign up for account<i class="icon-double-angle-right"></i></a></span></li> </form> </ul> </div> 

Answer 1

I had the same problem with the accordion / switch submenu that was nested in the dropdown menu in Bootstrap 3. I borrowed this syntax from the source code to stop all stalls in order to close the window:

 $(document).on( 'click.bs.dropdown.data-api', '[data-toggle="collapse"]', function (e) { e.stopPropagation() } ); 

You can replace [data-toggle="collapse"] with what you want to stop closing the form, for example. another class or other data property.

Answer 2

I get it. It was not included in the document function. (hat tip before Koala_dev) Javascript should be:

  <script type="text/javascript"> $(document).ready(function() { $(document).on('click', '.dropdown-menu', function (e) { $(this).hasClass('keep_open') && e.stopPropagation(); // This replace if conditional. }); }); </script>