jquery on tidak berfungsi

JQuery ialah perpustakaan JavaScript yang sangat popular yang membolehkan pembangun web menulis kesan halaman web dinamik dengan mudah. Walau bagaimanapun, kadangkala kami mendapati bahawa beberapa kaedah JQuery tidak berfungsi seperti yang diharapkan. Salah satu masalah biasa ialah kaedah on dalam JQuery tidak boleh digunakan secara normal. Jadi, mengapa masalah ini berlaku dan bagaimana kita boleh menyelesaikannya?

Sebelum kita menyelami masalah JQuery pada kaedah tidak berfungsi, kita perlu terlebih dahulu memahami tujuan kaedah on. Kaedah JQuery on digunakan untuk mengikat pengendali acara pada elemen DOM. Sebagai contoh, kita boleh menggunakan kod berikut untuk mengikat pengendali acara klik pada butang pada halaman:

$("#myButton").on("click", function(){
    alert("Button clicked");
});

Dalam kod di atas, kami telah memilih butang bernama "myButton" menggunakan pemilih $() DOM elemen dan pengendali acara "klik" terikat pada elemen melalui kaedah on(). Apabila pengguna mengklik butang, kotak amaran akan muncul.

Namun, kadangkala kita mungkin mendapati pengendali acara ini tidak berfungsi seperti yang diharapkan. Ia mungkin berlaku bahawa butang diklik tetapi tiada kotak amaran muncul, yang sangat mengelirukan.

Dalam kebanyakan kes, punca masalah ini ialah kita tidak menunggu elemen DOM dimuatkan sepenuhnya sebelum mengikat pengendali acara. Kemungkinan lain ialah kami menukar struktur elemen DOM selepas mengikat pengendali acara, menyebabkan pengikatan gagal.

Untuk menyelesaikan masalah ini, pertama sekali kita perlu memastikan bahawa kod dilaksanakan selepas elemen DOM dimuatkan. Kami boleh menggunakan coretan kod berikut untuk mencapai ini:

$(document).ready(function(){
    // 在这里编写操作DOM的代码
});

Dalam coretan kod di atas, kami menggunakan kaedah ready(), yang menunggu elemen DOM dimuatkan sebelum menjalankan kod yang disertakan. Ini memastikan bahawa kami dapat memanipulasi elemen DOM selepas ia dimuatkan sepenuhnya. Dalam kaedah ready(), kita boleh menggunakan kaedah on() untuk mengikat pengendali acara, supaya kita boleh memastikan bahawa pengendali acara tidak akan berkuat kuasa sehingga elemen DOM dimuatkan.

Soalan kedua mungkin memerlukan lebih terperinci. Dalam sesetengah kes, kita perlu mengubah suai elemen DOM, seperti menjana elemen DOM baharu dalam fungsi panggil balik AJAX. Dalam kes ini, kita perlu mengikat pengendali acara secara dinamik. Kita boleh menggunakan kod berikut untuk mencapai ini:

$(document).on("click", "#myButton", function(){
    alert("Button clicked");
});

Dalam kod di atas, kami mengikat pengendali acara "klik" menggunakan kaedah on(), tetapi pengendali dilalui melalui pemilih ("# myButton" ), bukannya elemen DOM yang ditunjuk oleh objek dokumen. Oleh itu, apabila anda menambah elemen DOM baharu bernama "myButton" pada dokumen anda, anda secara automatik mendapat pengendali acara itu.

Apabila menggunakan kaedah on(), kita juga boleh menggunakan parameter pilihan untuk menentukan konteks pengendali. Parameter ini boleh menjadi objek jQuery atau elemen DOM. Sebagai contoh, kita boleh menggunakan kod berikut untuk menentukan bahawa pengendali acara harus dijalankan dalam elemen induk yang ditentukan:

$("#myParent").on("click", "#myButton", function(){
    alert("Button clicked");
});

Dalam kod di atas, kami telah mengikat pengendali acara "klik" menggunakan kaedah on() , dan menentukan bahawa pengendali harus dijalankan dalam konteks elemen DOM dengan id "myParent".

Ringkasnya, jika anda menghadapi masalah menggunakan kaedah JQuery on, sila semak sama ada kod dijalankan selepas elemen DOM dimuatkan dan tentukan sama ada anda menambah atau mengubah suai elemen DOM secara dinamik. Dengan pembetulan mudah ini, anda sepatutnya dapat menyelesaikan masalah biasa ini dengan mudah.

Atas ialah kandungan terperinci jquery on tidak berfungsi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!