Я пытаюсь переписать следующую функцию для делегирования событий:
$("ul > li.closed").click(function (e) {
if (e.target === this) {
var li = $(this).closest('li');
li.find(' > ul').slideToggle('fast');
$(this).toggleClass("closed open");
}
});
Все остальные функции, которые я переписал, работают отлично, но этого нет. Вот что я написал:
$(document).on("click", "ul > li.closed", function (e) {
if (e.target === this) {
var li = $(this).closest('li');
li.find(' > ul').slideToggle('fast');
$(this).toggleClass("closed open");
}
});
Как вы можете видеть, я не сильно изменился. Улица открывается, но больше не закрывается. Где моя ошибка?
Проблема заключается в том, что после того, как li
открывается, класс closed
и добавляется open
, что означает, что селектор li.closed
не соответствует
В случае делегирования событий селекторы оцениваются лениво, но в случае нормальной обработки событий обработчики регистрируются в целевом элементе во время регистрации события, так что в тот момент, когда какой-либо элемент closed
класс, получит обработчик
$(document).on("click", "ul > li:has(ul)", function (e) {
var li = $(this).toggleClass("closed open");
li.children('ul').slideToggle('fast');
});