Gửi biểu mẫu qua AJAX trong jQuery

Question

Tôi đang sử dụng mã jQuery sau để gửi biểu mẫu qua 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; 
    }); 

Mã hoạt động hoàn hảo mà không có ajax. Nhưng không hoạt động nếu tôi tải biểu mẫu qua ajax. Tôi nghĩ rằng đó là vì tải mẫu thông qua ajax sau khi tải JavaScript.

Bất kỳ giải pháp nào?

Answer 1

Nếu sử dụng jQuery 1.7+, bạn có thể thử sử dụng .on() để ủy quyền sự kiện và liên kết với tất cả biểu mẫu trong tương lai với cùng một lớp. Hãy thử tìm cha mẹ gần nhất không được chèn động thay vì $ (tài liệu).

$(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

Bạn không thể đính kèm xử lý trực tiếp đến html mà không tồn tại

Có 2 cách để xử lý nó.

Liên kết các trình xử lý trong cuộc gọi lại thành công của 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');  
         } 
     });  

              }) 
} 

Một cách khác là ủy nhiệm việc xử lý đến một mức độ cao hơn trong tài liệu nên rất avalibale cho các yếu tố phù hợp với tương lai

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');  
         } 
     });  

              })