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?

— Anton Abramov
sumber

10

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

— Sergio

1

@Sergio ganti documentdengan induk statis terdekat.

— Mark Baijens

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