jQuery почему событие, добавленное через on, срабатывает несколько раз

11.01.2022

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

При этом при втором нажатии на "показать еще" все события утраивались.

Дело оказалось в том, что после загрузки новых товаров, чтобы новые кнопки, например, "добавить в корзинку" и другие события работали, каждый раз вызывался код:

 
$(".add_to_cart").on( "click", function (event){
    ...
});

- пример упрощенный

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

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

 
let aButtons = $(".add_to_cart");
aButtons.off();
$(".add_to_cart").on( "click", function (event){
    ...
});


Категории: JavaScript, JQuery
Пометки: jQuery on - как избежать повторного срабатывания / Почему onclick в jQuery срабатывает несколько раз.
Яндекс.Метрика