Как исправить, чтобы document on click не срабатывал несколько раз?

Question

[Михаил Гаврилюк]

У меня по ajax подгружается скрипт вместе с окошком.
И там есть обработчики событий on.
Если открываю окошко, получается, что каждый раз вешается обработчик. И в итоге он срабатывает несколько раз.
Вот пример:

$(document).on('click', '#add_item', function(){

});

Как можно это пофиксить, чтобы он срабатывал только один раз ?

Comments

[Сергей Соколов]

id "add_item" у вас ведь назначен единственному элементу на странице?

Answer 1

[Валерий]

$(document).one('click', '#add_item', function(){});

?

Comments

[Михаил Гаврилюк]

Должна быть возможность нажимать сколько угодно раз)) Но чтобы не срабатывало несколько раз при одном клике.

[Kovalsky]

Михаил Гаврилюк, для этого достаточно не вешать обработчик несколько раз

Answer 2

[Сергей Соколов]

Перенесите скрипт обработчика из подгружаемых ajax'ом фрагментов в страницу, чтобы присутствовал лишь раз.

* * *
Вообще, если не вешать каждый раз новую анонимную функцию, а вынести обработчик во внешнюю функцию, и отказаться от jQuery, то обработчик сработает лишь однажды:

const handler = () => {
  console.log('click');
}
 
document.addEventListener('click', handler);
document.addEventListener('click', handler);
document.addEventListener('click', handler);
// при клике выведет только 1 сообщение в консоль

Но у jQuery иная механика:

$(document).on('click', handler);
$(document).on('click', handler);
$(document).on('click', handler);
// при клике вывалится 3 сообщения