Jquery .on () olay gönder

105

İle bir sorunum var .on(). Birden fazla form elemanım var (formlarla class="remember"), ayrıca form.rememberAJAX kullanarak başka bir tane ekliyorum . Bu yüzden, gönder olayını şu şekilde işlemesini istiyorum:

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

ancak AJAX ile eklenen form bununla çalışmaz.

Sorun nerede? Bu bir böcek mi?

— Anton Abramov
kaynak

10

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

— Sergio

1

@Sergio document, en yakın statik üst öğe ile değiştirir .

— Mark Baijens

222

Olayı belge düzeyinde delege etmeniz gerekiyor

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

$('form.remember').on('submit'aynı şekilde çalışır, $('form.remember').submit(ancak kullandığınızda $(document).on('submit','form.remember'daha sonra eklenen DOM için de çalışacaktır.

— Dipesh Parmar
kaynak

24

Ayrıca $(document).on, performansının çok daha düşük olduğunu unutmayın $('form.remember').on('submit'. Artık belgedeki tüm gönderme olaylarını dinlemesi gerekiyor . on documentMümkünse kapsamı biraz kısıtlamak çok daha iyidir

— Liam

7

$ ['gövde']. on ('gönder', 'form.hatırla', işlev () {// kod}); sorunumu çözdü

— Olotin Temitope

@Liam doğru olsa da, $ (document) .on ajax ile işlenmiş öğeler üzerindeki CRUD işlemleri için hala kullanışlıdır.

— Norielle Cruz

41

Aynı semptomlarla ilgili bir problemim vardı. Benim durumumda, gönderme işlevimde "dönüş" ifadesinin eksik olduğu ortaya çıktı.

Örneğin:

 $("#id_form").on("submit", function(){
   //Code: Action (like ajax...)
   return false;
 })

— vitor_gaudencio_oliveira
kaynak

2

return false;Formun gönderilmeyeceğini unutmayın . Formu göndermek için kullanın return true;.

— Kai Noack

0

Buradaki sorun, "ON" un O ZAMAN var olan tüm öğelere uygulanmasıdır. Dinamik olarak bir öğe oluşturduğunuzda, tekrar çalıştırmanız gerekir:

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

createNewForm();

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

Formların genellikle adları veya kimlikleri olduğundan, yeni forma da ekleyebilirsiniz. Çok fazla dinamik şey oluşturuyorsam, bir kurulum veya bağlama işlevi ekleyeceğim:

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

Bu yüzden, ne zaman bir şey yaratsanız (benim durumumda düğmeler genellikle), sayfadaki her şeyi güncellemek için bindItems'i çağırırım.

createNewButton();
bindItems();

'Gövde' veya belge öğelerini kullanmayı sevmiyorum çünkü sekmeler ve kiplerle etrafta dolanma ve beklemediğiniz şeyler yapma eğilimindedirler. Tek sayfalık basit bir proje olmadığı sürece her zaman olabildiğince spesifik olmaya çalışırım.

— Danial
kaynak