Jquery .on () mengirimkan acara

101

Saya punya masalah dengan .on(). Saya memiliki beberapa elemen bentuk (formulir dengan class="remember"), juga saya menambahkan satu sama lain form.remembermenggunakan AJAX. Jadi, saya ingin menangani acara pengiriman seperti:

$('form.remember').on('submit',function(){...})

tetapi formulir yang ditambahkan dengan AJAX tidak berfungsi dengannya.

Dimana masalahnya? Apakah ini bug?

jquery ajax forms submit Anton Abramov
sumber
10
Coba$(document).on('submit','form.remember',function(){...})
Sergio
1
@Sergio ganti documentdengan induk statis terdekat.
Mark Baijens

Jawaban:

220

Anda perlu mendelegasikan acara ke tingkat dokumen

$(document).on('submit','form.remember',function(){
   // code
});

$('form.remember').on('submit'bekerja sama seperti $('form.remember').submit(tetapi ketika Anda menggunakannya $(document).on('submit','form.remember'maka itu juga akan berfungsi untuk DOM yang ditambahkan nanti.

Dipesh Parmar
sumber
24
Juga perlu diingat bahwa $(document).onmemiliki kinerja yang jauh lebih rendah daripada $('form.remember').on('submit'. Sekarang harus mendengarkan semua peristiwa pengiriman dalam dokumen. Jauh lebih baik membatasi ruang lingkup sedikit daripada mendengarkan on document, jika mungkin
Liam
7
$ ('body'). on ('submit', 'form.remember', function () {// code}); memecahkan masalah saya
Olotin Temitope
Meskipun @Liam benar, $ (document) .on masih berguna untuk operasi CRUD pada elemen yang dirender ajax.
Norielle Cruz
38

Saya punya masalah dengan gejala yang sama. Dalam kasus saya, ternyata fungsi submit saya tidak memiliki pernyataan "return".

Sebagai contoh:

 $("#id_form").on("submit", function(){
   //Code: Action (like ajax...)
   return false;
 })
vitor_gaudencio_oliveira
sumber
2
Perhatikan bahwa return false;tidak akan mengirimkan formulir. Untuk mengirimkan formulir gunakan return true;.
Kai Noack
0

Masalahnya di sini adalah bahwa "on" diterapkan ke semua elemen yang ada PADA WAKTU. Saat Anda membuat elemen secara dinamis, Anda perlu menjalankannya lagi:

$('form').on('submit',doFormStuff);

createNewForm();

// re-attach to all forms
$('form').off('submit').on('submit',doFormStuff);

Karena formulir biasanya memiliki nama atau ID, Anda juga dapat melampirkan ke formulir baru. Jika saya membuat banyak hal dinamis, saya akan menyertakan fungsi setup atau bind:

function bindItems(){
    $('form').off('submit').on('submit',doFormStuff); 
    $('button').off('click').on('click',doButtonStuff);
}

Jadi setiap kali Anda membuat sesuatu (tombol biasanya dalam kasus saya), saya hanya memanggil bindItems untuk memperbarui semua yang ada di halaman.

createNewButton();
bindItems();

Saya tidak suka menggunakan 'body' atau elemen dokumen karena dengan tab dan modals mereka cenderung berkeliaran dan melakukan hal-hal yang tidak Anda harapkan. Saya selalu berusaha sespesifik mungkin kecuali proyek 1 halaman yang sederhana.

Danial
sumber