2011-11-14 21 views
21

Tôi đã sử dụng .on() trong jQuery 1.7 và tự hỏi liệu có thể đính kèm nhiều bộ chọn tại một thời điểm cho các phần tử đã được đưa vào một trang hay không. Trước đây, tôi đã sử dụng live() - nhưng rõ ràng là tại sao tôi muốn di chuyển các cải tiến hiệu suất nhất định.jQuery .on() với nhiều bộ chọn trong ủy nhiệm sự kiện?

Bạn có thể sử dụng .on() theo cách thức như:

$(document).on('click', '#selector1, #selector2, .class1', function() { 
    //stuff 
}); 

Và có bất kỳ lợi ích bị mất trong việc gắn vào tài liệu?

?

Trả lời

22
  1. Bạn có thể sử dụng .Trên() theo cách thức như:

    $(document).on('click', '#selector1, #selector2, .class1', function() { 
        //stuff 
    }); 
    

    Yes, that will work.

  2. Tôi muốn sử dụng cải tiến hiệu suất cho này thay vì live().

    không ưu điểm hiệu suất của việc sử dụng đoạn mã đó như trái ngược với sử dụng live(), như live() chính nó liên kết các sự kiện để các tài liệu, và trong jQuery 1.7, gọi điện trực tiếp on đằng sau hậu trường.

  3. Và có bất kỳ lợi ích nào bị mất khi đính kèm vào tài liệu không?

    Nhược điểm để ràng buộc với document là sự kiện phải đi qua toàn bộ danh sách tổ tiên trước khi được xử lý; này, as pointed out in the jQuery documentation, là tuyến đường có thể chậm nhất. Sẽ tốt hơn nếu xử lý sự kiện sớm hơn, bằng cách gắn trình xử lý vào phần tử gần với nguồn của sự kiện.

+0

cảm ơn tuyệt vời. Tôi nghi ngờ nhiều :) Vì vậy, về cơ bản, tôi chỉ cần thêm một bộ chọn gần hơn nơi '.on (' selectors của tôi là đúng? tức là cái gì đó như '$ ('. gần hơn-parent-container'). , '# selector1, # selector2, .class1', '? – Andy

+0

@Andy: Vâng, chính xác điều đó. Rõ ràng là phần tử bạn gọi' .on() 'trên * phải * nằm trong DOM tại thời điểm bạn gọi' .on() '. – Matt

+0

về cơ bản, có. – roselan

0

có thể và "this" là bộ chọn được nhấp, chứ không phải tài liệu.

bạn nên kết nối với phần tử cha gần nhất của công cụ chọn của bạn. Khi bạn nhấp vào '# selector1', bong bóng sự kiện đến phần tử xử lý sự kiện, tại đây: tài liệu.

Càng nhiều lớp, càng có nhiều hành động. Hơn nữa, nếu giữa selector1 và tài liệu có một trình xử lý sự kiện nhấn khác, nó có thể bị chặn với event.stopPropagation(); và không bao giờ tiếp cận trình xử lý sự kiện "tài liệu".

bạn có thể kiểm tra sự kiện lừa đảo "chặn" in this fiddle.

Các vấn đề liên quan