Блог

Я создал выпадающую функциональность, используя Jquery с одним прослушивателем событий, который позволяет мне закрывать выпадающий список при нажатии в любом месте вне контейнера выпадающего списка, и другим прослушивателем событий, который обрабатывает элементы подменю.

По замыслу выпадающий список должен оставаться открытым, даже если щелкнуты элементы подменю, и должен закрываться только при нажатии кнопки переключения или щелчке пользователя за пределами контейнера выпадающего списка.

Проблема

Допустим, что general.js имеет прослушиватель событий щелчка следующим образом

 $('document').on('click.namespace',function(e){ // do stuff });
  

Теперь anotherscript.js имеет прослушиватель событий, который обрабатывает фактические щелчки подменю

 $('#clickbutton').on('click', function(e){ 
         // Remove all html  from inside the .dropdown container 
         // Recreate the html using another js function 
         $('.container').html(recreatedhtml);
});
  

Проблема возникает, когда я пытаюсь определить, кто является родителем цели нажатия кнопки подменю, потому что я хочу знать, был ли щелчок внутри контейнера или снаружи.

Поскольку щелчок по #clickbutton удаляет html из контейнера и повторно вставляет его, я считаю, что это вызывает проблемы для функции parents(), поэтому функция parents(‘.dropdown’) возвращает false, даже если пункт подменю является потомком выпадающего класса.

Проверьте цель события

 $(document).on('click.namespace',function(e){ 
   if(!$(e.target).closest(dropdownContainerSelector).length){
      // click is not in dropdown container
   }

 });
  

Обратите внимание, что document — это не строка, это глобальный объект внутри window