menyetel acara onclick ke tombol yang ditambahkan secara dinamis?

Agar pendengar dapat ditambahkan ke tombol yang ditambahkan secara terprogram, kita perlu melampirkan pendengar ke induk tombol, bukan ke tombol itu sendiri.

Mari kita asumsikan HTMLnya adalah sebagai berikut:

<div id="buttons">

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

</div>

Kita dapat menggunakan metode .on jQuery dengan delegasi acara.

Ini menggunakan metode .on tanpa delegasi—tidak berhasil:

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

Ini menggunakan metode .on dengan delegasi—ini berhasil:

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

Agar ini berfungsi, perlu ada elemen induk yang sama untuk tombol asli dan tombol yang akan Anda tambahkan, sesuai dokumen:

Keuntungan dari peristiwa yang didelegasikan adalah mereka dapat memproses peristiwa dari elemen turunan yang ditambahkan ke dokumen di lain waktu. Dengan memilih elemen yang dijamin ada pada saat pengendali peristiwa yang didelegasikan dipasang, Anda dapat menggunakan peristiwa yang didelegasikan untuk menghindari keharusan sering melampirkan dan menghapus pengendali peristiwa.

Dalam contoh saya, tombol baru akan ditambahkan ke elemen induk #buttons secara terprogram setelah batas waktu 2 detik, dan penangan klik akan tetap terpasang karena #buttons ada di sana saat pemuatan halaman.

Saat kita melampirkan pengendali klik ke tombol, kita tidak bisa melampirkan pengendali klik ke tombol yang belum ada, tapi jika kita melampirkan ke induk tombol yang ada dari awal, ketika tombol baru ditambahkan mereka akan memiliki pendengar klik yang terpasang:

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);

Jika Anda memerlukan ID pembelian, Anda dapat menyimpannya pada atribut data seperti ini:

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

Kemudian, di JavaScript Anda dapat mengaksesnya seperti ini di handler:

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

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

Demo yang berfungsi di mana Anda dapat mengaktifkan delegasi acara tersedia di sini: http://codepen.io/tinacious/pen/MbQJWX?editors=1010

var button = document.createElement('button')

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

someContainerElement.appendChild(button)

Nama metode cukup menjelaskan apa yang sedang terjadi, namun secara eksplisit:

Pertama, buat tag button dan tetapkan ke variabel button

var button = document.createElement('button')

Tambahkan pendengar acara ke elemen button. Ia mendengarkan acara click, dan menjalankan fungsinya.

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

Kemudian tambahkan button Anda ke someContainerElement. Ini berarti button Anda akan ditempatkan di dalam elemen induk ini.

someContainerElement.appendChild(button)