Enviar formulario a través de AJAX en jQuery

Question

Estoy usando el siguiente código jQuery para enviar un formulario a través de AJAX.

jQuery('form.AjaxForm').submit(function() {    
     $.ajax({ 
      url  : $(this).attr('action'), 
      type : $(this).attr('method'), 
      dataType: 'json', 
      data : $(this).serialize(), 
      success : function(data) { 
         alert('Submitted') 
         }, 
      error : function(xhr, err) { 
         alert(''Error);  
         } 
     });  
     return false; 
    }); 

El código funciona a la perfección sin ajax. Pero no funciona si cargo formulario a través de ajax. Creo que es debido a la carga de formulario a través de ajax después de la carga de JavaScript.

¿Alguna solución?

Answer 1

Si usa jQuery 1.7+ podría intentar usar .on() para delegar el evento y enlazar a todos los formularios futuros con la misma clase. Intente encontrar el padre más cercano que no se inserta de forma dinámica en lugar de $ (documento).

$(document).on('submit', 'form.AjaxForm', function() {    
     $.ajax({ 
      url  : $(this).attr('action'), 
      type : $(this).attr('method'), 
      dataType: 'json', 
      data : $(this).serialize(), 
      success : function(data) { 
         alert('Submitted'); 
      }, 
      error : function(xhr, err) { 
         alert('Error');  
      } 
     });  
     return false; 
    }); 

Answer 2

No se puede asociar controladores directamente a html que no existe

Hay 2 formas de manejarlo.

Enlaza los controladores en la devolución de llamada de éxito de ajax.

$(formParentSelector).load(formFileUrl, function() { 
     /* within this success callback the new html exists and can run code*/ 
     AjaxForm(); 
    }); 

function AjaxForm(){ 
    jQuery('form.AjaxForm').submit(function() {    
     $.ajax({ 
      url  : $(this).attr('action'), 
      type : $(this).attr('method'), 
      dataType: 'json', 
      data : $(this).serialize(), 
      success : function(data) { 
         alert('Submitted'); 
         }, 
      error : function(xhr, err) { 
         alert('Error');  
         } 
     });  

              }) 
} 

La otra forma es delegar el manejador a un nivel superior en el documento por lo que es avalibale para futuros elementos coincidentes

jQuery(document).on('submit','form.AjaxForm').submit(function() {    
     $.ajax({ 
      url  : $(this).attr('action'), 
      type : $(this).attr('method'), 
      dataType: 'json', 
      data : $(this).serialize(), 
      success : function(data) { 
         alert('Submitted'); 
         }, 
      error : function(xhr, err) { 
         alert('Error');  
         } 
     });  

              })