Question

I have a bootstrap dropdown menu in my application that is working great, except that when I click on any of the input fields the dropdown menu fades out. I know about the javascript function $('.dropdown-menu').find('form').click(function (e) {
e.stopPropagation();
}); but in my case it doesnt seem to be doing anything.

Here is my code:

%li.dropdown
          %a.dropdown-toggle{"data-toggle" => "dropdown", :href => "#"}
            Sign In
            %span.caret
          .dropdown-menu
            %form{"accept-charset" => "UTF-8", :action => "/users", :method => "post", :style => "margin: 0px"}
              %div{:style => "margin:0;padding:0;display:inline"}
              %input{:name => "utf8", :type => "hidden", :value => "✓"}/
              %input{:name => "authenticity_token", :type => "hidden", :value => "4L/A2ZMYkhTD3IiNDMTuB/fhPRvyCNGEsaZocUUpw40="}/
              %fieldset.textbox{:style => "padding:10px"}
                %input{:placeholder => "Username", :style => "margin-top: 8px", :type => "text"}/
                %input{:placeholder => "Passsword", :style => "margin-top: 8px", :type => "password"}/
                .divider
                %input.btn-primary{:name => "commit", :type => "submit", :value => "Log In"}/

Can anyone please point at my error? Why is this not working? Thank is advance.

Answer 1

Try this instead:

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