установить событие onclick для динамически добавляемой кнопки?

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

Предположим, что HTML выглядит следующим образом:

<div id="buttons">

  <button class="btn">
    Existing button
  </button>

</div>

Мы можем использовать метод jQuery .on с делегированием событий.

Здесь используется метод .on без делегирования — он не работает:

$('.btn').on('click', handleClick); // don't use this, it won't work

Здесь используется метод .on с делегированием — это действительно работает:

$('#buttons').on('click', '.btn', handleClick);

Чтобы это работало, должен быть общий родительский элемент для исходных кнопок и кнопок, которые вы будете добавлять, в соответствии с документами:

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

В моем примере новая кнопка будет добавлена ​​к родительскому элементу #buttons программно после 2-секундного тайм-аута, а обработчик кликов все еще будет прикреплен, потому что #buttons был там при загрузке страницы.

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

var $buttons = $('#buttons');

var handleClick = function () {
  alert('Button click works!');
};

// Works for new buttons (uses event delegation)
$buttons.on('click', '.btn', handleClick);


// Add a new button after 2 seconds
setTimeout(function () {
  var $newButton = $('<button />');

  $newButton
    .addClass('btn')
    .text('New button');

  $buttons.append($newButton);
}, 2000);

Если вам нужен идентификатор покупки, вы можете сохранить его в атрибуте данных следующим образом:

  <button class="btn" data-purchase="purchase_01">
    Existing button
  </button>

Затем в JavaScript вы можете получить к нему доступ следующим образом в обработчике:

var handleClick = function () {
  var purchaseId = $(this).data('purchase');

  alert('Button click works! \n\n' + purchaseId);
};

Рабочая демонстрация, в которой вы можете переключать делегирование событий, доступна здесь: http://codepen.io/tinacious/pen/MbQJWX?editors=1010

var button = document.createElement('button')

button.addEventListener('click', function(event) {
 ... your code here ...
})

someContainerElement.appendChild(button)

Имена методов в значительной степени объясняют, что происходит, но если быть точным:

Сначала создайте тег button и назначьте его переменной button.

var button = document.createElement('button')

Добавьте прослушиватель событий к элементу button. Он прослушивает событие click и запускает функцию.

button.addEventListener('click', function(event) {
  ... your code here ...
})

Затем добавьте button к someContainerElement. Это означает, что ваш button будет помещен внутри этого родительского элемента.

someContainerElement.appendChild(button)