Kак добавить addeventlistener к кнопке, которая создается с помощью js?

Question

[khodos_dmitry]

Пытался так:

let save_calculation = document.getElementsByClassName('save_calculation');
for (let i = 0; i < save_calculation.length; i++) {
    save_calculation[i].addEventListener('click', function() {
        alert("Скопировано в буфер обмена.");
    });
}

но не работает. Хотя getElementsByClassName создает живую коллекцию.
Остается только аттрибут onclick?

Comments

[Тигран Абрамян]

что у вас там не работает?
тут все отлично

[Andrew]

TigA, Видимо, кнопка создаётся после навешивания.

[khodos_dmitry]

Andrew, да, как быть в такой ситуации?

[Andrew]

khodos_dmitry, вешать после её создания.

Answer 1

[Alex]

Если нужно отслеживать одно событие на нескольких однотипных элементах, часть из которых создаётся позже, можно сделать так:

// Некий контейнер в котором нужно отслеживать элементы
const container = document.body.querySelector('.container')

// Навешиваем ОДИН обработчик на весь контейнер
container.addEventListener('click', event => {
  // если кликнули не на тот элемент что нам нужен — выходим
  if (!event.target.matches('button, button *')) {
    return
  }
  
  // Кликнули на какую-то кнопку внутри контейнера. Даже если эта кнопка была добавлена позже, после навешивания обработчика
  // Что-то делаем ...
})

Comments

[Михаил]

не факт что target будет кнопка, а не что-нибудь в ней

[Alex]

Михаил, Это так. Но для примера концепции это не так важно

[khodos_dmitry]

А есть ли смысл не использовать атрибут onclick?

[Alex]

khodos_dmitry, А есть смысл использовать?

[khodos_dmitry]

не соображу, как мне получить доступ к кнопке, если нажали на нее. Сделал так:

let entry_content = document.querySelector("#content .entry-content");
let save_calculation = document.getElementsByClassName('save_calculation');
// Навешиваем ОДИН обработчик на весь контейнер
entry_content.addEventListener('click', event => {
    // если кликнули не на тот элемент что нам нужен — выходим
    if (!event.target.matches('button.save_calculation')) {
        return;
    }
    for (let i = 0; i < save_calculation.length; i++) {
        save_calculation[i].addEventListener('click', function() {
            copytext(save_calculation[i].parentNode.querySelector('a'));
            alert("Скопировано в буфер обмена.");
        }, true);
    }
});

[Алексей]

khodos_dmitry, onclick удаляется все обработчики на элементе и добавляет обработчик клика. addEventListener не удаляет существующие обработчики на элементе, а добавляет к ним еще один

Answer 2

[sobolay]

А нельзя ли навешивать обработчик на кнопки, когда они создавались (возможно, с промежуточным сохранением в какой-н глобальной переменной). Это позволило бы их потом не разыскивать с помощью document.getElementsByClassName

let container = document.querySelector(".container"),
  	newButton = document.createElement('button');

   newButton.innerText = 'Кликни для запуска обработчика';
   newButton.addEventListener('click', event => {
	  alert('Вы кликнули на кнопку');
   });
  container.appendChild(newButton);

Comments

[khodos_dmitry]

Вообще можно, но у меня по ajax приходит кусок кода вместе с кнопками.

[sobolay]

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

[sobolay]

если же у вас периодические повторяющиеся запросы (например что-то вроде подгрузки контента в зависимости от прокрутки страницы) можно попробовать собирать объекты кнопок в глобальном массиве и навешивать события только на появившиеся при подгрузке:
- создаем пустой массив;
- при успешной обработке запроса вызываем колбэком ф-цию, которая находит все кнопки на странице и проверяет, есть ли уже такие кнопки в нашем глобальном массиве.
- если этой кнопки в массиве нет, навешиваем на нее листенер и добавляем в массив