Bộ chọn jQuery on()

Question

Mục đích của selector trong phương thức jQuery on() là gì?

Trong những tình huống là

$("#fish").on("click", ".button", function() { 
    // something 
}); 

tốt hơn, chẳng hạn,

$("#fish").find(".button").on("click", function() { 
    // something 
}); 

?

Tôi đã nhìn vào jQuery documention và thấy:

Nếu chọn bỏ qua hoặc là null, xử lý sự kiện được gọi là trực tiếp hoặc trực tiếp-bound. Trình xử lý được gọi mỗi khi một sự kiện xảy ra trên các phần tử đã chọn, cho dù nó xảy ra trực tiếp trên phần tử hoặc bong bóng từ phần tử con cháu (bên trong).

Khi bộ chọn được cung cấp, trình xử lý sự kiện được gọi là ủy quyền. Trình xử lý không được gọi khi sự kiện xảy ra trực tiếp trên phần tử bị ràng buộc, nhưng chỉ cho các hậu duệ (các phần tử bên trong) khớp với bộ chọn. jQuery bong bóng sự kiện từ mục tiêu sự kiện lên đến phần tử mà trình xử lý được đính kèm (tức là, trong cùng đến phần tử ngoài cùng) và chạy trình xử lý cho bất kỳ phần tử nào dọc theo đường dẫn đó khớp với bộ chọn.

Am I correct khi nói rằng sự khác biệt là trong ví dụ đầu tiên của tôi, sự kiện này được ràng buộc với #fish, nhưng chỉ lắng nghe cho các sự kiện bọt lên từ .buttons, trong khi ở ví dụ thứ hai sự kiện này chắc chắn sẽ mỗi của .buttons? Nếu vậy thì hàm ý của điều này là gì? : S

Vì vậy, nếu sự kiện bị ràng buộc với #fish, khi bạn nhấp vào nút .button, có cách nào để biết nút .button đã được nhấp vào không? điều này sẽ chỉ đến con #fish chứ không phải là .button, đúng không?

Answer 1

Ví dụ số 1 sẽ ràng buộc sự kiện cho các nút được tạo động, miễn là chúng là hậu duệ của #fish. Bất kỳ nút nào được tạo sau khi liên kết sẽ có trình xử lý nhấp được gọi. Bạn cũng có thể liên kết với $(document) nếu bạn không muốn chọn phần tử tổ tiên.

Ví dụ # 2 sẽ chỉ liên kết với các nút nằm trong DOM tại thời điểm ràng buộc. Mọi phần tử được tạo động sẽ không nhận được trình xử lý.

Trong cả hai ví dụ, this và $(this) sẽ tham chiếu đến nút được nhấp, chứ không phải #fish.

Hãy xem jsFiddle để có bản trình diễn này.Bạn sẽ thấy trong bảng điều khiển mà this đề cập đến các nút không phải là #fish.

$('#fish').on('click', '.button', function(){ 
    console.log(this.id); 
}); 

Answer 2

Vâng, đó là chính xác. Khi bạn gọi phương thức on với công cụ chọn, nó sẽ tạo sự kiện được ủy quyền.

$("#fish").on("click", ".button", function() { 

không giống nhau như:

$("#fish").delegate(".button", "click", function() { 

Sự kiện này được liên kết với các yếu tố #fish, nhưng nó chỉ gọi là xử lý sự kiện cho các nhấp chuột trên các yếu tố .button. Điều này có nghĩa là phần tử .button không phải tồn tại khi bạn liên kết phần tử, chỉ với phần tử #fish.