Jquery «документ по щелчку» не работает, когда срабатывает выпадающий-переключатель Bootstrap

Question

Проблема

У меня есть прослушиватель событий, который скрывает раскрывающийся список (удаляя класс), когда щелчок происходит вне раскрывающегося списка:

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

Работает отлично, кроме случаев, когда я нажимаю на выпадающий список начальной загрузки (который использует класс .dropdown-toggle). В этом случае мой раскрывающийся список остается открытым, а раскрывающийся список начальной загрузки также открыт. Событие щелчка никогда не слышно в DOM.

Answer 1

Обновление : После большой борьбы я нашел ответ:

По какой-то неизвестной причине Bootstrap .dropdown-toggle включает stopPropagation.Поэтому, когда он щелкает по нему, больше ничего в дереве документа не слышно.Мое решение состояло в том, чтобы явно включить прослушиватель событий для класса .dropdown-toggle в дополнение к прослушивателю моего документа.

      $(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");
        }
      });

Если у кого-то есть лучшее решение, я с радостью отмечу его как правильный ответ!