$ (tài liệu) .on ('click', '#id', function() {}) vs $ ('# id'). On ('click', function() {})

Question

Tôi đang cố gắng tìm hiểu sự khác biệt giữa

$(document).on('click', '#id', function(){}); 

và

là những gì

$('#id').on('click', function(){}); 

tôi đã không thể tìm thấy bất kỳ thông tin về nếu có bất kỳ sự khác biệt giữa hai, và nếu như vậy những gì khác biệt mà bạn có thể .

Ai đó có thể giải thích nếu có bất kỳ sự khác biệt nào không?

Answer 1

Ví dụ đầu tiên minh họa ủy quyền sự kiện. Trình xử lý sự kiện được gắn kết với một phần tử cao hơn cây DOM (trong trường hợp này là document) và sẽ được thực hiện khi một sự kiện đến phần tử đó có nguồn gốc trên một phần tử khớp với bộ chọn.

Điều này là có thể vì hầu hết các sự kiện DOM bong bóng lên cây từ điểm xuất phát. Nếu bạn nhấp vào phần tử #id, sự kiện nhấp chuột được tạo sẽ bong bóng qua tất cả các phần tử tổ tiên (lưu ý phụ: thực sự có một pha trước đây, được gọi là 'giai đoạn bắt', khi sự kiện xảy ra dưới gốc cây đến mục tiêu). Bạn có thể nắm bắt sự kiện trên bất kỳ tổ tiên nào.

Ví dụ thứ hai liên kết trình xử lý sự kiện trực tiếp với phần tử. Sự kiện sẽ vẫn bong bóng (trừ khi bạn ngăn chặn điều đó trong trình xử lý) nhưng vì trình xử lý bị ràng buộc với đích, bạn sẽ không thấy tác động của quá trình này.

Bằng cách ủy nhiệm một trình xử lý sự kiện, bạn có thể đảm bảo nó được thực thi cho các phần tử không tồn tại trong DOM tại thời điểm ràng buộc. Nếu phần tử #id của bạn được tạo sau ví dụ thứ hai, trình xử lý của bạn sẽ không bao giờ thực thi. Bằng cách ràng buộc với một phần tử mà bạn biết chắc chắn là trong DOM tại thời điểm thực hiện, bạn đảm bảo rằng trình xử lý của bạn sẽ thực sự được gắn vào một thứ gì đó và có thể được thực thi khi thích hợp sau này.

Answer 2

Hãy xem xét đoạn mã sau

<ul id="myTask"> 
    <li>Coding</li> 
    <li>Answering</li> 
    <li>Getting Paid</li> 
</ul> 

Bây giờ, ở đây đi sự khác biệt

// Remove the myTask item when clicked. 
$('#myTask').children().click(function() { 
    $(this).remove() 
}); 

Bây giờ, nếu chúng ta thêm một myTask một lần nữa?

$('#myTask').append('<li>Answer this question on SO</li>'); 

Nhấp vào mục myTask này sẽ không xóa mục này khỏi danh sách vì nó không có trình xử lý sự kiện nào bị ràng buộc. Nếu thay vào đó, chúng tôi đã sử dụng .on, mục mới sẽ hoạt động mà không cần thêm bất kỳ nỗ lực nào từ phía chúng tôi. Đây là cách phiên bản .Trên sẽ nhìn:

$('#myTask').on('click', 'li', function (event) { 
    $(event.target).remove() 
}); 

Tóm tắt:

Sự khác biệt giữa .on() và .click() sẽ là .click() có thể không hoạt động khi các yếu tố DOM gắn liền với sự kiện .click() được thêm tự động tại một điểm sau đó trong khi .on() có thể được sử dụng trong các tình huống trong đó các phần tử DOM được kết hợp với cuộc gọi .on() có thể được tạo động vào một thời điểm sau đó.