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

Question

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

0

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

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

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

sqe 23 сен. 2013, в 17:48

Источник

Теги:

jquery

event-delegation

1 ответ

Ещё вопросы

Arun P Johny · Answer 1 · 2013-09-23T13-48-00.000Z

Проблема заключается в том, что после того, как 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');
});

Почему это должно иметь значение?
Это открывает li и закрывает его напрямую. Только после другого щелчка он ведет себя как задумано.