Jquery 'document on click' doesn't work when Bootstrap dropdown-toggle fires

Question

The Problem

I have an event listener that hides a dropdown (by removing a class) when a click happens outside of the dropdown:

$(document).on('click', function(event) {
 if (!$(event.target).closest('#myDropdown').length) {
      $('#myDropdown').removeClass("show-menu");
 }
});

It works perfectly, except when I click on a bootstrap dropdown (that uses the class '.dropdown-toggle). In that case my dropdown stays open while the bootstrap dropdown is also open. The click event is never heard in DOM.

johnC · Accepted Answer · 2019-05-21 19:11:01Z

1

Update: After a lot of struggle I found the answer:

For some unknown reason, Bootstrap .dropdown-toggle includes a stopPropagation. So when it's clicked it, nothing else in the document tree is heard. My solution was to explicitly include an event listener for the .dropdown-toggle class in addition to my document listener.

      $(document).on('click', function(event) {
        if (!$(event.target).closest('#myDropdown').length) {
          $('#myDropdown').removeClass("show-menu");
        }
      });

      //listens for Bootstrap .dropdown-toggle
      $('.dropdown-toggle').on('click', function(event) {
        if (!$(event.target).closest('#myDropdown').length) {
          $('#myDropdown').removeClass("show-menu");
        }
      });

If anybody has a better solution I'm happy to mark it as the correct answer!

answered May 21, 2019 at 19:11

johnC

551 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JonSnow Over a year ago

does not wok here :-(

Collectives™ on Stack Overflow

Jquery 'document on click' doesn't work when Bootstrap dropdown-toggle fires

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related