Jquery .on () enviar evento

98

Tengo un problema con .on(). Tengo múltiples elementos de formulario (formularios con class="remember"), también agrego otro form.rememberusando AJAX. Entonces, quiero que maneje el evento de envío de algo como:

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

pero el formulario agregado con AJAX no funciona con él.

¿Dónde está el problema? ¿Es un error?

jquery ajax forms submit Anton Abramov
fuente
9
Prueba$(document).on('submit','form.remember',function(){...})
Sergio
1
@Sergio reemplace documentcon el padre estático más cercano.
Mark Baijens

Respuestas:

217

Necesitas delegar el evento al nivel del documento.

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

$('form.remember').on('submit'funciona igual que, $('form.remember').submit(pero cuando lo use $(document).on('submit','form.remember', también funcionará para el DOM agregado más adelante.

Dipesh Parmar
fuente
24
También hay que tener en cuenta que $(document).ontiene un rendimiento mucho menor que $('form.remember').on('submit'. Ahora tiene que escuchar todos los eventos de envío en el documento. Es mucho mejor restringir un poco el alcance que escuchar on document, si es posible
Liam
7
$ ('cuerpo'). on ('enviar', 'formulario.recuerdo', función () {// código}); resolvió mi problema
Olotin Temitope
Aunque @Liam es correcto, $ (document) .on sigue siendo útil para operaciones CRUD en elementos renderizados ajax.
Norielle Cruz
38

Tuve un problema con los mismos síntomas. En mi caso, resultó que a mi función de envío le faltaba la declaración "return".

Por ejemplo:

 $("#id_form").on("submit", function(){
   //Code: Action (like ajax...)
   return false;
 })
vitor_gaudencio_oliveira
fuente
2
Tenga en cuenta que return false;no enviará el formulario. Para enviar el formulario utilice return true;.
Kai Noack
0

El problema aquí es que el "on" se aplica a todos los elementos que existen EN EL MOMENTO. Cuando crea un elemento dinámicamente, debe ejecutar de nuevo:

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

createNewForm();

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

Dado que los formularios suelen tener nombres o ID, también puede adjuntarlos al nuevo formulario. Si estoy creando muchas cosas dinámicas, incluiré una función de configuración o vinculación:

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

Entonces, cada vez que crea algo (botones generalmente en mi caso), simplemente llamo a bindItems para actualizar todo en la página.

createNewButton();
bindItems();

No me gusta usar 'cuerpo' o elementos de documento porque con pestañas y modales tienden a quedarse y hacer cosas que no esperas. Siempre trato de ser lo más específico posible a menos que sea un proyecto simple de 1 página.

Danial
fuente