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

Tôi thấy có một phương pháp mới .on()trong jQuery 1.7 thay thế cho các .live()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.

Trong tài liệu khá rõ ràng tại sao bạn không muốn sử dụng trực tiếp. Cũng như Felix đã đề cập, .onlà một cách hợp lý hơn để đính kèm các sự kiện.

Việc sử dụng phương thức .live () không còn được khuyến khích vì các phiên bản sau của jQuery cung cấp các phương thức tốt hơn nhưng không có nhược điểm của nó. Đặc biệt, các vấn đề sau đây phát sinh khi sử dụng .live ():

• jQuery cố gắng truy xuất các phần tử được chỉ định bởi bộ chọn trước khi gọi .live()phương thức, điều này có thể tốn thời gian trên các tài liệu lớn.
• Phương thức chuỗi 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 .live()sự kiện được đính kèm tại documentphần tử, các sự kiện sẽ đi theo đường dài nhất và chậm nhất có thể trước khi chúng được xử lý.
• Việc gọi event.stopPropagation() trong trình xử lý sự kiện không hiệu quả trong việc dừng các 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 sang document.
• Các .live()tương tác phương pháp 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()!

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

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

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

function doSomething() {
    // do something
}

Giờ đây, .live()jQuery phiên bản 1.7 không được dùng nữa và bị loại bỏ trong phiên bản 1.9, bạn nên sử dụng .on()phương pháp này. Đây là một ví dụ tương đương sử dụng .on()phương pháp:

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

function doSomething() {
    // do something
}

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

Trong ví dụ trên, tôi đang gọi .on()tài liệu, tuy nhiên, bạn sẽ nhận được hiệu suất tốt hơn nếu bạn sử dụng một phần tử gần bộ chọn của mình hơn. Mọi phần tử tổ tiên 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 ở đây trong tài liệu nhưng khá dễ bỏ sót.

Xem Blog chính thức

[..] API .on () và .off () mới thống nhất tất cả các cách đính kèm sự kiện vào tài liệu trong jQuery - và chúng ngắn hơn để nhập! [...]

.live()

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

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

và

.on()

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

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

Hướng dẫn tốt về sự khác biệt giữa trực tiếp và trực tiếp

Trích dẫn từ liên kết trên

Có gì sai với .live ()

Việc sử dụng phương thức .live () không còn được khuyến khích vì các phiên bản sau của jQuery cung cấp các phương thức tốt hơn nhưng không có nhược điểm của nó. Đặc biệt, các vấn đề sau đây phát sinh khi sử dụng .live ():

1. jQuery cố gắng truy xuất các phần tử được chỉ định bởi 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.
2. Phương thức chuỗi không được hỗ trợ. Ví dụ: $ (“a”). Find (“. Ngoại vi,. Bên ngoài”). 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 đi theo đường dẫn dài nhất và chậm nhất có thể trước khi chúng được xử lý.
4. Việc gọi event.stopPropagation () trong trình xử lý sự kiện không hiệu quả trong việc dừng các 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 sang 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 những cách có thể gây ngạc nhiên, ví dụ: $ (tài liệu) .unbind (“nhấp chuột”) xóa tất cả các trình xử lý nhấp chuột được đính kèm bởi bất kỳ lệnh gọi nào tới .live ()!

để biết thêm thông tin, hãy xem qua .. .live () và .on ()

Phương thức .live () đượ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 vào mọi tab sẽ tạo ra ... 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 thú vị ...

Tôi là tác giả của tiện ích mở rộng Chrome "Lưu nhận xét" sử dụng jQuery và một tiện ích đã sử dụng .live(). Cách thức hoạt động của tiện ích mở rộng là gắn một trình nghe vào tất cả các textareas đang sử dụng. live()- điều này hoạt động tốt vì bất cứ khi nào tài liệu thay đổi, nó vẫn sẽ gắn người nghe vào tất cả các vùng văn bản mới.

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

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

1. BẬT cờ bằng cách sử dụng jQuery sau khi siêu liên kết được nhấp

   $ ('a'). live ('click', function () {cleanSession = false;});

2. BẬT cờ bằng cách sử dụng jQuery sau khi nhấp vào bất kỳ lúc nào loại nút nhập vào nút gửi

$ ("input [type = submit]"). live ('click', function () {alert ('click vào nút input'); cleanSession = false;});

1. BẬT cờ bằng cách sử dụng jQuery sau khi gửi biểu mẫu bất kỳ lúc nào xảy ra

$ ('form'). live ('submit', function () {cleanSession = false;});

Bây giờ đ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 sẽ bị kích hoạt 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 gọi javascript (document.form.submit)

Vì vậy, có một sự khác biệt chính giữa .live và .on. Nếu bạn sử dụng .live, các sự kiện của bạn sẽ được kích hoạt ngay lập tức nhưng nếu bạn chuyển sang .on, sự kiện của bạn không được kích hoạt đúng lúc