Почему при оборачивании кода в $(document).on('click', function ( { }); он ломается?

Question

[Lana]

При клике на букву она добавляется в текстовое поле, но когда я обернула код в эту конструкцию, то при каждом последующим клике количество вводимых букв растет. Проще увидеть на примере:
https://codepen.io/lanimya/pen/qBZGxWm
Как это исправить?
Такая обертка нужна для того, чтобы код работал в блоке, который подгружается с ajax.

P.s. ответ fallus в комментах - то, что нужно. Благодарю

Comments

[Maxim Kirshin]

зачем оборачивать документ в клик?

[Maxim Kirshin]

твоя проблема в том, что при каждом клике по документу - ты добавляешь новых слушателей к уже имеющимся

item.addEventListener('click', (event) => {
                     textarea.value += event.target.innerHTML;
                 });

а зачем, не совсем понятно. Может ты в ready хочешь обернуть?

[Lana]

вообще клик мне и не нужен, но ready не работает

Answer 1

[hzzzzl]

каждый раз при document.onclick вызывается вот это всё, и добавляются новые event listener-ы на спаны

Такая обертка нужна для ajax

каким образом?

Comments

[Lana]

Не подскажете как это исправить или может быть заменить event listener-ы ?

[Lana]

некий контент подгружается ajax и код, находящийся в main.js не срабатывает без этой обертки

[hzzzzl]

Lana, что если поменять например на .one(), чтобы событие срабатывало один раз, а не при каждом клике по документу?

$(document).one('click', .....

некий контент подгружается ajax

если есть доступ к этому куску кода, то лучше бы все необходимые операции выполнить при успешном выполнении того $.ajax

[hzzzzl]

Не подскажете как это исправить или может быть заменить event listener-ы

на худой конец можно ввести переменную типа eventListenersAdded = false/true, и проверять при каждом вызове document.onclick, надо ли это делать еще раз, или нет

[Lana]

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

[Lana]

Дело в том, что у меня есть этих элемента два, находятся в разный частях страницы, в разных php файлах. И один из них подгружается ajax-ом.
Код находится в js файле и контент с ajax его не видит

[hzzzzl]

Lana,

И один из них подгружается ajax-ом.

предлагаю обработчики кликов вешать на элементы именно в этот момент, когда всё подгрузится

Answer 2

[fallus]

Я ничего не понял(в том числе, для чего микс из нативного js и jquery).

Но так разобраться проще:

Но опять же, я ничего не понял.

Comments

[Lana]

Дело в том, что у меня есть этих элемента два, находятся в разный частях страницы, в разных php файлах. И один из них подгружается ajax-ом.
Код находится в js файле и контент с ajax его не видит

[fallus]

Lana, «Код находится в js файле и контент с ajax его не видит» — вы имеете ввиду, что код не работает на тех элементах html, которые были подгружены через ajax?

[fallus]

Если так, то этот вариант будет оптимальным:


Он будет работать на соответствующих элементах, даже если они появились в DOM асинхронно.

[Lana]

Даа, это то, что нужно, все работает, Спасибо!!