Javascript Делегирование событий

Question

Я пытаюсь переписать следующую функцию для делегирования событий:

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

Как видите, я не сильно изменился. Уль открывается, но больше не закрывается. Где моя ошибка?

Answer 1

Проблема когда-то 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');
});