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

Question

Я хочу спросить, как назначить событие onclick динамически добавленной кнопке на DOM? Например, после создания кнопки с помощью следующей

var btn = document.createElement("button"); 

Я хочу, чтобы создать onclick для этой кнопки, так что, когда я нажимаю на него, это будет вызывать функцию purchase(json[i].id). Как мне добавить к нему?

Answer 1

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) 

Answer 2

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

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

<div id="buttons"> 

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

</div> 

Мы можем использовать .on метод JQuery в with event delegation.

Это использует метод .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); 

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

<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