Jquery .on () gửi sự kiện

98

Tôi có một vấn đề với .on(). Tôi có nhiều phần tử biểu mẫu (biểu mẫu với class="remember"), tôi cũng thêm một phần tử khác form.rememberbằng AJAX. Vì vậy, tôi muốn nó xử lý sự kiện gửi một cái gì đó như:

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

nhưng biểu mẫu được thêm bằng AJAX không hoạt động với nó.

Vấn đề ở đâu? Nó là một lỗi?

— Anton Abramov
nguồn

9

Hãy thử$(document).on('submit','form.remember',function(){...})

— Sergio

1

@Sergio thay thế documentbằng cha mẹ tĩnh gần nhất.

— Mark Baijens 21/09/18

217

Bạn cần ủy quyền sự kiện cho cấp tài liệu

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

$('form.remember').on('submit'hoạt động giống như $('form.remember').submit(nhưng khi bạn sử dụng $(document).on('submit','form.remember'thì nó cũng sẽ hoạt động cho DOM được thêm vào sau này.

— Dipesh Parmar
nguồn

24

Cũng nên nhớ rằng $(document).oncó hiệu suất thấp hơn nhiều $('form.remember').on('submit'. Bây giờ nó phải lắng nghe tất cả các sự kiện gửi trong tài liệu. Đó là tốt hơn nhiều để hạn chế phạm vi một chút so với nghe on document, nếu có thể

— Liam

7

$ ('body'). on ('submit', 'form.remember', function () {// code}); giải quyết vấn đề của tôi

— Olotin Temitope

Mặc dù @Liam là đúng, $ (document) .on vẫn hữu ích cho các hoạt động CRUD trên các phần tử được kết xuất ajax.

— Norielle Cruz

38

Tôi đã gặp sự cố với cùng một symtoms. Trong trường hợp của tôi, hóa ra là hàm gửi của tôi bị thiếu câu lệnh "return".

Ví dụ:

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

— vitor_gaudencio_oliveira
nguồn

2

Lưu ý rằng return false;sẽ không gửi biểu mẫu. Để gửi biểu mẫu sử dụng return true;.

— Kai Noack

0

Vấn đề ở đây là "on" được áp dụng cho tất cả các phần tử tồn tại VÀO THỜI ĐIỂM. Khi bạn tạo động một phần tử, bạn cần chạy lại:

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

createNewForm();

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

Vì biểu mẫu thường có tên hoặc ID, bạn cũng có thể đính kèm vào biểu mẫu mới. Nếu tôi đang tạo nhiều nội dung động, tôi sẽ bao gồm chức năng thiết lập hoặc liên kết:

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

Vì vậy, sau đó bất cứ khi nào bạn tạo một cái gì đó (thường là các nút trong trường hợp của tôi), tôi chỉ cần gọi bindItems để cập nhật mọi thứ trên trang.

createNewButton();
bindItems();

Tôi không thích sử dụng các phần tử 'body' hoặc tài liệu vì với các tab và phương thức, chúng có xu hướng lơ lửng và làm những điều bạn không mong đợi. Tôi luôn cố gắng trở nên cụ thể nhất có thể trừ khi nó là một dự án 1 trang đơn giản.

— Danial
nguồn