Pertanyaan $ (dokumen) .on ('klik', '#id', fungsi () {}) vs $ ('# id'). pada ('klik', fungsi () {}) [tertutup]


Saya mencoba mencari tahu apa perbedaannya

$(document).on('click', '#id', function(){});

dan

$('#id').on('click', function(){});

Saya belum dapat menemukan informasi apa pun jika ada perbedaan di antara keduanya, dan jika demikian apa bedanya.

Bisakah seseorang menjelaskannya jika ada perbedaan sama sekali?


75
2018-02-14 16:14


asal


Jawaban:


Contoh pertama menunjukkan delegasi acara. Event handler terikat ke elemen yang lebih tinggi dari pohon DOM (dalam hal ini, the document) dan akan dieksekusi ketika suatu peristiwa mencapai elemen yang berasal dari elemen yang cocok dengan pemilih.

Ini dimungkinkan karena sebagian besar acara DOM gelembung menaiki pohon dari titik asal. Jika Anda mengklik #id elemen, peristiwa klik dihasilkan yang akan meluap melalui semua elemen leluhur (catatan sampingan: sebenarnya ada satu fase sebelum ini, yang disebut 'fase penangkapan', ketika peristiwa itu turun dari pohon ke target). Anda dapat menangkap peristiwa tersebut di salah satu nenek moyang tersebut.

Contoh kedua mengikat event handler langsung ke elemen. Acara akan tetap bergejolak (kecuali Anda mencegahnya di handler) tetapi karena pawang terikat pada target, Anda tidak akan melihat efek dari proses ini.

Dengan mendelegasikan pengendali event, Anda dapat memastikannya dieksekusi untuk elemen yang tidak ada di DOM pada saat pengikatan. Jika Anda #id elemen dibuat setelah contoh kedua Anda, pawang Anda tidak akan pernah mengeksekusi. Dengan mengikat ke elemen yang Anda tahu pasti di DOM pada saat eksekusi, Anda memastikan bahwa pawang Anda benar-benar akan melekat pada sesuatu dan dapat dieksekusi sesuai nantinya.


58
2018-02-14 16:17



Pertimbangkan kode berikut

<ul id="myTask">
  <li>Coding</li>
  <li>Answering</li>
  <li>Getting Paid</li>
</ul>

Sekarang, inilah perbedaannya

// Remove the myTask item when clicked.
$('#myTask').children().click(function () {
  $(this).remove()
});

Sekarang, bagaimana jika kita menambahkan myTask lagi?

$('#myTask').append('<li>Answer this question on SO</li>');

Mengeklik item myTask ini tidak akan menghapusnya dari daftar, karena tidak ada penangan kejadian yang terikat. Jika sebaliknya kami akan digunakan .on, item baru akan bekerja tanpa usaha ekstra dari pihak kami. Beginilah cara versi .on akan terlihat:

$('#myTask').on('click', 'li', function (event) {
  $(event.target).remove()
});

Ringkasan: 

Perbedaan antara .on() dan .click() akan seperti itu .click() mungkin tidak berfungsi ketika elemen DOM yang terkait dengan .click() acara ditambahkan secara dinamis pada titik kemudian .on() dapat digunakan dalam situasi di mana elemen DOM yang terkait dengan .on() panggilan dapat dibuat secara dinamis pada titik berikutnya.


11
2018-02-14 16:24