Jquery .on () invia evento

98

Ho un problema con .on(). Ho più elementi del modulo (moduli con class="remember"), inoltre ne aggiungo un altro form.rememberusando AJAX. Quindi, voglio che gestisca l'evento di invio qualcosa come:

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

ma il modulo aggiunto con AJAX non funziona con esso.

Dov'è il problema? E 'un errore?

— Anton Abramov
fonte

9

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

— Sergio

1

@Sergio sostituisci documentcon il genitore statico più vicino.

— Mark Baijens

217

È necessario delegare l'evento a livello di documento

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

$('form.remember').on('submit'funziona come $('form.remember').submit(ma quando lo usi $(document).on('submit','form.remember'funzionerà anche per il DOM aggiunto in seguito.

— Dipesh Parmar
fonte

24

Tieni inoltre presente che $(document).onha prestazioni molto inferiori rispetto a $('form.remember').on('submit'. Ora deve ascoltare tutti gli eventi di invio nel documento. È molto meglio limitare l'ambito un po 'che ascoltare on document, se possibile

— Liam

7

$ ('body'). on ('submit', 'form.remember', function () {// code}); ha risolto il mio problema

— Olotin Temitope

Anche se @Liam è corretto, $ (document) .on è ancora utile per le operazioni CRUD su elementi renderizzati ajax.

— Norielle Cruz,

38

Ho avuto un problema con gli stessi sintomi. Nel mio caso, si è scoperto che alla mia funzione di invio mancava l'istruzione "return".

Per esempio:

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

— vitor_gaudencio_oliveira
fonte

2

Nota che return false;non invierà il modulo. Per inviare il modulo utilizzare return true;.

— Kai Noack

0

Il problema qui è che "on" viene applicato a tutti gli elementi che esistono AL MOMENTO. Quando crei un elemento dinamicamente, devi eseguire di nuovo on:

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

createNewForm();

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

Poiché i moduli di solito hanno nomi o ID, puoi semplicemente allegare anche al nuovo modulo. Se creo molte cose dinamiche, includerò una funzione di configurazione o associazione:

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

Quindi, ogni volta che crei qualcosa (i pulsanti di solito nel mio caso), chiamo bindItems per aggiornare tutto sulla pagina.

createNewButton();
bindItems();

Non mi piace usare "body" o elementi del documento perché con schede e modali tendono a rimanere in giro e fare cose che non ti aspetti. Cerco sempre di essere il più specifico possibile a meno che non sia un semplice progetto di 1 pagina.

— Danial
fonte