Phương thức jQuery on() trên nhiều bộ chọn

Question

Kể từ phiên bản 1.7 live không được chấp nhận.

Tiếp theo ví dụ là dễ dàng để làm cho tương thích với on phương pháp mới:

$('nav li, #sb-nav li, #help li').live('click', function() { 
    // code... 
}); 

Sử dụng on:

$('nav, #sb-nav, #help').on('click', 'li', function() { 
    // code... 
}); 

Làm thế nào để viết lại như sau ví dụ sử dụng on?

$('#header .fixed-feedback-bn, #sb-sec .feedback-bn').live('click', function() { 
    // code... 
}); 

Answer 1

thay đổi $ ('tài liệu') để $ (document) mỗi bình luận

$(document).on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function() { 
    // code... 
}); 

.live() chỉ là ràng buộc tài liệu như nghe.

Hai xu của tôi là bạn hầu như luôn tìm được người nghe tốt hơn document. Ở mức tối thiểu, hầu như tất cả các trang sử dụng một trình bao bọc nội dung chính. Điều này giúp loại bỏ các nút trong phần đầu trang, chân trang và đôi khi là thanh bên làm người nghe.

Cách tốt nhất để sử dụng .on làm chức năng ủy nhiệm là xác định tổ tiên chung gần nhất được dự kiến ​​sẽ không bao giờ bị hủy hoặc có sự kiện không bị ràng buộc. Ví dụ: nếu bạn có biểu mẫu được cập nhật và thay đổi theo yêu cầu ajax, người nghe có thể là nút biểu mẫu (nếu chỉ nội dung của biểu mẫu được cập nhật) hoặc phần tử vùng chứa (thường là div) bao quanh biểu mẫu. Nếu một div như vậy không có, bạn luôn có thể thêm nó vào, hoặc bạn chỉ có thể đi lên cây cho tổ tiên tiếp theo.

[chỉnh sửa để thêm:]

Trong mẫu mã đặc biệt được cung cấp, thật khó để nói nếu có một người biết lắng nghe tốt hơn mà sẽ chứa cả #header và cũng #sb-sec. Nhưng tưởng tượng rằng những điều này chia sẻ một tổ tiên với id "mainContainer", mã hiệu quả hơn của bạn chỉ đơn giản là giao dịch hoán đổi ra người nghe:

$('#mainContainer').on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function() { 
    // code... 
}); 

Answer 2

Nếu bạn đang cố gắng sử dụng .on() để bạn có thể lắng nghe các sự kiện trên đối tượng DOM có thể được tạo sau khi bạn thực hiện cuộc gọi .on() ban đầu, sau đó cách hiệu quả nhất để làm như vậy là tìm một đối tượng cha mẹ hiện có sẽ không đến và đi và bạn có thể liên kết trình xử lý sự kiện cho đến bây giờ.

.live() đặt tất cả người nghe trên đối tượng tài liệu (cha mẹ chính) và có thể nhận được khá kém hiệu quả nếu bạn có nhiều người nghe.

.on() cho phép bạn chỉ định đối tượng cha mẹ nào sẽ hiệu quả nhất. Vì vậy, nếu bạn muốn đặt tất cả các trình xử lý sự kiện này vào một câu lệnh và '#header .fixed-feedback-bn, # sb-sec .feedback-bn' này không có cha mẹ chung, thì bạn phải chỉ định tài liệu như cha mẹ như Greg đã viết.

Tuy nhiên, cách hiệu quả hơn để thực hiện việc này là chia nhỏ phần này theo nhu cầu. Đối với các phần tử không có nhu cầu động, chỉ cần liên kết trực tiếp với phần tử đó.Ví dụ, nếu # header và # sb-giây không đến/đi và không cần hành vi năng động, bạn chỉ có thể tìm trực tiếp đến nó như thế này:

$('#header, #sb-sec').on('click', function() { 
    // code here 
}); 

Và, đối với các yếu tố mà bạn cần một số năng động hành vi, chọn một phụ huynh phổ biến phù hợp và móc vào điều đó bằng cách sử dụng cha mẹ chung làm điểm bắt đầu cho các sự kiện và công cụ chọn làm bộ lọc cho các thành phần phụ bạn muốn sự kiện kích hoạt:

$('#feedback').on('click', '.feedback-bn, .fixed-feedback-bn', function() { 
    // code here 
}); 

Answer 3

Bạn có thể muốn xem tài liệu về live(), việc chuyển sang on() được ghi lại: http://api.jquery.com/live/