jQuery .on không hoạt động nhưng .live hiện

Question

Vì phương thức live() không được dùng như phiên bản 1.7, tôi bắt đầu xem xét nguồn của mình và chuyển đổi tất cả các trình xử lý sự kiện trực tiếp của tôi sang on(). Tôi đã ấn tượng rằng sự thay đổi sẽ đơn giản và mọi thứ sẽ hoạt động như trước đây; tuy nhiên, tôi đã chạy vào một số mã không hoạt động như nó cần.

Tôi có jQuery sau chọn để ràng buộc sự kiện click của một thẻ bảng ...

$('table.accordion-header').live("click", function ($e) { 
    // gobs of code 
} 

... và nó chỉ hoạt động tốt (tức - sự kiện bảng click tag của tôi được nâng lên ngay cả sau khi không đồng bộ postbacks trên trang xảy ra). Nhưng nếu tôi thay đổi mã thành

$('table.accordion-header').on("click", function ($e) { 
    // gobs of code 
} 

sau đó sự kiện nhấp chuột không còn được nâng lên sau khi bất kỳ postback không đồng bộ nào trên trang xảy ra. Xin lưu ý - sự kiện nhấp không hoạt động với bất kỳ đăng lại không đồng bộ nào, nhưng sau đó sự kiện này không còn hoạt động. Vậy tôi đang thiếu gì ở đây?

Answer 1

Tương đương với

$('table.accordion-header').live("click", function ($e) { 
    // gobs of code 
}); 

là

$(document).on("click", 'table.accordion-header', function ($e) { 
    // gobs of code 
}); 

Answer 2

câu hỏi như thế này đã được trả lời nhiều, nhiều lần vì nó dường như khá phổ biến mà mọi người hoàn toàn không hiểu làm thế nào các phiên bản động của .on() công trinh. Bạn đang sử dụng hình thức tĩnh của .on() nơi đối tượng phải tồn tại vào thời điểm bạn gọi .on() khi bạn có thể có ý định sử dụng các hình thức năng động của .on() như thế này:

$(someStaticParentObject).on("click", 'table.accordion-header', function ($e) { 
    // code 
} 

.live() được thay thế bằng .on() vì .on() cho phép bạn để có hiệu suất tốt hơn bằng cách xác định một đối tượng cha mẹ tĩnh của đối tượng động để đính kèm trình xử lý sự kiện vào đó là hiệu quả hơn khi gắn nó vào đối tượng document là những gì .live() đã làm. Tôi khuyên bạn nên đọc những câu trả lời trước đây (tất cả đều được viết bởi tôi) để hiểu thêm về cách sử dụng tốt nhất .on(). Những câu trả lời cũng bao gồm ý kiến ​​về cách thức hiệu quả nhất để sử dụng .on() và mô tả ngắn gọn về cách hoạt động:

jquery: on vs live

Does jQuery.on() work for elements that are added after the event handler is created?

How does jQuery's new on() method compare to the live() method in performance?

What's the difference between jQuery.bind() and jQuery.on()?

Why not take Javascript event delegation to the extreme?

Answer 3

Trong nguồn jQuery 1.7.2, "live" là khá nhiều trỏ đến "on" vì vậy vấn đề này có lẽ không liên quan đến chức năng "on". Điều này cần phải được loại trừ. Bộ chọn cho bật có thể là một vấn đề.

jQuery nguồn:

live: function(types, data, fn) { 
    jQuery(this.context).on(types, this.selector, data, fn); 
    return this; 
}, 

Answer 4

tôi đã gặp rắc rối với cố gắng cập nhật sống của tôi() để trên() quá nhưng cuối cùng đã nhận nó khi ai đó chỉ cho tôi như thế nào phụ huynh hoặc chọn bối cảnh đầu tiên tác phẩm.Điều quan trọng là đảm bảo rằng phần tử đầu tiên này nằm trong Mô hình đối tượng tài liệu.

Cách $ (điều này) hoạt động với .on() cũng không rõ ràng.

$(document).on("click", 'table.accordion-header', function ($e) { 
    // gobs of code 
}); 

Trong ví dụ đưa ra ở trên $ (this) trong mã chức năng của bạn sẽ tham khảo $ ('table.accordion-header') và không $ (document) như bạn mong đợi.

giải thích thêm ở đây: .on() with $(this)

Answer 5

Cách tốt nhất tôi có thể đặt này cũng giống như các tài liệu nói từ jQuery trên .live() và .on() chức năng:

1. Trong chọn của bạn "$ (selector)" ném vào một phần tử cụ thể tải cùng với trang - không phải động.
2. Sau đó, đặt bộ chọn phụ vào phương thức có "bộ chọn" được chỉ định - bộ chọn này có thể được tạo động.

//so this.. 
    $('table.accordion-header').live("click", function ($e) { 
    // gobs of code 
}); 

//becomes this.. 
    $('table').on("click",'.accordion-header', function ($e) { 
    // gobs of code 
}); 

Giả sử rằng "bảng" được nạp với trang của khóa học.