jquery агрегаты onclick на div

Question

У меня есть div, в котором я при загрузке страницы связывает функцию щелчка, как показано ниже

 <div class="document-short-list-item" data-d-id="5" data-w-id="16" data-s-id="15">Klik her for at tilføje</div>

$(".document-short-list-item").click(function () {
    addToShortList(this);
});

addToShortList выполняет следующее:

  $(element).removeClass('document-short-list-item').addClass('document-short-list-item-added').on('click', removefromShortList(element));

, а removefromShortList меняет то же самое

 $(element).removeClass('document-short-list-item-added').addClass('document-short-list-item').on('click', addToShortList(element));

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

Answer 1

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

Практически всегда плохая идея связывать / отвязать обработчики в их собственных событиях привязки и часто приводит к такого рода ситуации. Вместо этого вы можете положиться на функциональность .on() для динамического выполнения при изменении классов. Это называется «делегированием события».

В основном привязать событие щелчка к общему родительскому элементу (document часто работает, если только что-либо не останавливает распространение события). Примерно так:

$(document).on("click", ".document-short-list-item", function () {
    $(this)
        .removeClass("document-short-list-item")
        .addClass("document-short-list-item-added");
});
$(document).on("click", ".document-short-list-item-added", function () {
    $(this)
        .removeClass("document-short-list-item-added")
        .addClass("document-short-list-item");
});

Это прикрепит обработчик щелчка к самому документу, но при обработке этого щелчка он отфильтрует исходный элемент по аргументу селектора. Таким образом, любой исходный .document-short-list-item вызовет первый обработчик, а любой исходящий .document-short-list-item-added вызовет второй обработчик. Таким образом, вам нужно установить эти обработчики только один раз при загрузке страницы, и они будут выполнять внутреннюю фильтрацию по мере необходимости.

В качестве альтернативы, если этот подход может работать в вашей ситуации, вы можете использовать единственный обработчик, который будет просто переключать классы. Например:

$(document).on("click", ".document-short-list-item, .document-short-list-item-added", function () {
    $(this)
        .toggleClass("document-short-list-item")
        .toggleClass("document-short-list-item-added");
});

Которая будет реагировать на любой исходный элемент (поскольку оба находятся в селекторе) и переключать оба класса, независимо от того, какой из них активен в данный момент.