Sự khác biệt giữa jQuery .live() và .on()

Question

Tôi thấy có một phương pháp mới .on() trong jQuery 1.7 thay thế .live() trong các phiên bản trước đó.

Tôi muốn biết sự khác biệt giữa chúng và lợi ích của việc sử dụng phương pháp mới này.

Answer 1

Khá rõ ràng trong số docs lý do bạn không muốn sử dụng trực tiếp. Cũng như được đề cập bởi Felix, .on là một cách sắp xếp hợp lý hơn các sự kiện.

Sử dụng phương pháp .live() không còn được khuyến cáo kể từ sau phiên bản của jQuery cung cấp phương pháp tốt hơn mà không cần phải nhược điểm của nó. Đặc biệt, các vấn đề sau xảy ra với việc sử dụng .live():

• jQuery cố gắng để lấy các yếu tố theo quy định của bộ chọn trước khi gọi phương thức .live(), có thể tốn nhiều thời gian trên các tài liệu lớn.
• Phương pháp ghép không được hỗ trợ. Ví dụ: $("a").find(".offsite, .external").live(...); là không hợp lệ và không hoạt động như mong đợi.
• Vì tất cả các sự kiện .live() được đính kèm tại phần tử document, các sự kiện có thể dài nhất và chậm nhất đường dẫn có thể trước khi chúng được xử lý.
• Gọi event.stopPropagation() trong trình xử lý sự kiện không hiệu quả trong việc dừng trình xử lý sự kiện được đính kèm thấp hơn trong tài liệu; sự kiện đã được truyền đến document.
• Phương pháp .live() tương tác với các phương pháp sự kiện khác theo những cách mà có thể gây ngạc nhiên, ví dụ, $(document).unbind("click") loại bỏ tất cả các bộ xử lý nhấp chuột kèm theo bất kỳ cuộc gọi đến .live()!

Answer 2

Xem official Blog

[..] Các .Trên mới() và .off() API thống nhất tất cả các cách để gắn sự kiện để một tài liệu trong jQuery - và chúng ngắn hơn để gõ ! [...]

Answer 3

Good tutorial on difference between on vs live

Trích từ liên kết ở trên

Điều gì là sai với .live()

Sử dụng phương pháp .live() không còn được khuyến cáo kể từ sau các phiên bản của jQuery cung cấp các phương thức tốt hơn mà không có các hạn chế của nó. Đặc biệt, các vấn đề sau xảy ra với việc sử dụng .live():

1. jQuery cố gắng để lấy các yếu tố theo quy định của bộ chọn trước khi gọi.phương thức live(), có thể tốn thời gian trên tài liệu lớn.
2. Phương pháp ghép không được hỗ trợ. Ví dụ: $ (“a”). Tìm (“.site bên ngoài .external”). (Live) (...); không hợp lệ và không hoạt động như mong đợi.
3. Vì tất cả các sự kiện .live() được đính kèm tại phần tử tài liệu , các sự kiện có đường dẫn dài nhất và chậm nhất có thể trước khi chúng được xử lý.
4. Sự kiện gọi.stopPropagation() trong trường hợp xử lý sự kiện không hiệu quả trong việc dừng trình xử lý sự kiện kèm theo thấp hơn trong tài liệu; sự kiện đã được truyền đến tài liệu.
5. Phương thức.live() tương tác với các phương thức sự kiện khác theo cách có thể là gây ngạc nhiên, ví dụ: $ (tài liệu) .unbind (“click”) loại bỏ tất cả các trình xử lý đính kèm theo bất kỳ lệnh gọi nào .live() !

Answer 4

Tôi là tác giả của một phần mở rộng Chrome "Comment Save" trong đó sử dụng jQuery, và một trong đó sử dụng .live(). Cách tiện ích mở rộng hoạt động bằng cách gắn trình nghe cho tất cả các textareas sử dụng. live() - điều này làm việc tốt vì bất cứ khi nào tài liệu thay đổi nó sẽ vẫn gắn trình nghe cho tất cả các textareas mới.

Tôi đã chuyển đến .on() nhưng cũng không hoạt động. Nó không đính kèm người nghe bất cứ khi nào tài liệu thay đổi - vì vậy tôi đã hoàn nguyên về sử dụng .live(). Đó là lỗi tôi đoán trong .on(). Chỉ cần cẩn thận về nó tôi đoán.

Answer 5

Một sự khác biệt mà mọi người vấp ngã khi di chuyển từ .live() đến .on() là các tham số cho .on() hơi khác khi liên kết sự kiện với các phần tử được thêm động vào DOM.

Dưới đây là một ví dụ về cú pháp chúng tôi sử dụng để sử dụng với các phương pháp .live():

$('button').live('click', doSomething); 

function doSomething() { 
    // do something 
} 

Bây giờ với .live() bị phản đối trong jQuery phiên bản 1.7 và loại bỏ trong phiên bản 1.9, bạn nên sử dụng phương pháp .on(). Dưới đây là một ví dụ tương đương bằng cách sử dụng phương pháp .on():

$(document).on('click', 'button', doSomething); 

function doSomething() { 
    // do something 
} 

Xin lưu ý rằng chúng tôi đang gọi điện thoại .on() so với tài liệu chứ không phải là nút tự. Chúng tôi chỉ định bộ chọn cho phần tử có các sự kiện chúng tôi đang nghe trong thông số thứ hai.

Trong ví dụ trên, tôi gọi số .on() trên tài liệu, tuy nhiên, bạn sẽ có hiệu suất tốt hơn nếu bạn sử dụng phần tử gần với công cụ chọn của mình hơn. Bất kỳ phần tử tổ tiên nào cũng sẽ hoạt động miễn là nó tồn tại trên trang trước khi bạn gọi .on().

Điều này được giải thích here in the documentation nhưng rất dễ bỏ sót.

Answer 6

Tôi có yêu cầu xác định sự kiện đã đóng của trình duyệt. Sau khi thực hiện nghiên cứu, tôi đang làm theo sau bằng cách sử dụng jQuery 1.8.3

1. bật một lá cờ sử dụng sau khi jQuery siêu liên kết được nhấp

   $ ('a') sống (nghe tiếng 'click', function() {cleanSession = false}).

2. bật một lá cờ sử dụng jQuery sau khi bất kỳ thời điểm nút input type của trình được nhấp

$ ("input [type = nộp]"). Sống (nghe tiếng 'click', function() {alert ('nút đầu vào được nhấp'); cleanSession = false;});

1. bật một lá cờ sử dụng jQuery sau khi bất kỳ hình thức thời gian nộp xảy ra

$ ('form') sống ('submit', function() {cleanSession = false;}).

Điều quan trọng ... giải pháp của tôi chỉ hoạt động nếu tôi sử dụng .live thay thế .on. Nếu tôi sử dụng .on thì sự kiện bị sa thải sau khi biểu mẫu được gửi và quá muộn. Nhiều lần biểu mẫu của tôi được gửi bằng cách sử dụng cuộc gọi javascript (document.form.submit)

Vì vậy, có sự khác biệt chính giữa .live và .on. Nếu bạn sử dụng .live sự kiện của bạn bị sa thải ngay lập tức nhưng nếu bạn chuyển sang .Trên nó không bị sa thải đúng thời hạn

Answer 7

để biết thêm check it out ..

.live() phương pháp .live() và .on() là được sử dụng khi bạn xử lý việc tạo nội dung động ... như tôi đã tạo trên chương trình thêm tab khi tôi thay đổi giá trị của Thanh trượt Jquery và tôi muốn đính kèm chức năng nút đóng cho mỗi tab sẽ tạo ... mã tôi đã thử là ..

var tabs = $('#tabs').tabs(); 
             // live() methos attaches an event handler for all 
             //elements which matches the curren selector 
     $("#tabs span.ui-icon-close").live("click", function() { 


      // fetches the panelId attribute aria-control which is like tab1 or vice versa 
      var panelId = $(this ).closest("li").remove().attr("aria-controls"); 
      $("#" + panelId).remove(); 
      tabs.tabs("refresh"); 
     }); 

và nó hoạt động rất nhiều ...

Answer 8

.live() 

Phương thức này được sử dụng để đính kèm trình xử lý sự kiện cho tất cả các yếu tố phù hợp với bộ chọn hiện tại, hiện tại và trong tương lai.

$("#someid").live("click", function() { 
    console.log("live event."); 
}); 

và

.on() 

Phương pháp này được dùng để đính kèm một chức năng xử lý sự kiện cho một hoặc nhiều sự kiện để các yếu tố lựa chọn dưới đây là ví dụ.

$("#someid").on("click", function() { 
    console.log("on event."); 
});