Tại sao sử dụng jQuery on () thay vì click ()

Hiện tại với jQuery khi tôi cần làm gì đó khi xảy ra Click tôi sẽ làm như thế này ...

$(".close-box").click( function() {
    MoneyBox.closeBox();
    return false;
});

Tôi đang xem một số mã mà người khác có trong một dự án và họ làm như thế này ...

$(".close-box").live("click", function () {
    MoneyBox.closeBox();
    return false;
});

Lưu ý rằng nó dường như làm điều tương tự theo như tôi có thể nói ngoại trừ họ đang sử dụng hàm live () hiện không được chấp nhận và các tài liệu jQuery nói để sử dụng on()thay thế nhưng một trong hai cách tại sao lại sử dụng live / on () thay vì ví dụ đầu tiên của tôi?

Bởi vì bạn có thể có một phần tử được tạo động (ví dụ: đến từ lệnh gọi AJAX), bạn có thể muốn có cùng một trình xử lý nhấp chuột trước đó được liên kết với cùng một bộ chọn phần tử, sau đó bạn "ủy quyền" sự kiện nhấp chuột bằng cách sử dụng on()đối số bộ chọn

Để lam sang tỏ:

http://jsfiddle.net/AJRw3/

on()cũng có thể đồng nghĩa với click()nếu bạn không có bộ chọn được chỉ định:

$('.elementClass').click(function() { // code 
});

đồng nghĩa với

$('.elementClass').on('click', function() { // code
});

Theo nghĩa nó chỉ thêm trình xử lý một lần cho tất cả các phần tử có lớp elementClass. elementClassVí dụ: nếu bạn có một $('<div class="elementClass" />')phần tử mới, trình xử lý sẽ không bị ràng buộc vào phần tử mới đó, bạn cần làm:

$('#container').on('click', '.elementClass', function() { // code
});

Giả sử #containerlà .elementClasstổ tiên của

Có rất nhiều câu trả lời, mỗi câu đề cập đến một vài điểm - hy vọng điều này có thể cung cấp cho bạn câu trả lời của bạn, với lời giải thích tốt về cái gì và cách sử dụng nó.

Sử dụng click()là một bí danh cho bind('click' ...). Việc sử dụng bind()sẽ đưa DOM giống như khi trình xử lý sự kiện đang được thiết lập và liên kết hàm với từng phần tử phù hợp trong DOM. Điều đó có nghĩa là nếu bạn sử dụng, $('a').click(...)bạn sẽ liên kết hàm được cung cấp cho sự kiện nhấp chuột của mọi thẻ liên kết trong DOM được tìm thấy khi mã đó chạy.

Sử dụng live()là cách cũ trong jQuery; nó được sử dụng để liên kết các sự kiện giống như bind()hiện tại, nhưng nó không chỉ ràng buộc chúng với các phần tử trong DOM khi mã chạy - nó còn lắng nghe các thay đổi trong DOM và cũng sẽ liên kết các sự kiện với bất kỳ phần tử nào được so khớp trong tương lai. Điều này hữu ích nếu bạn đang thao tác DOM và bạn cần một sự kiện tồn tại trên một số phần tử có thể bị xóa / cập nhật / thêm vào DOM sau này nhưng không tồn tại khi DOM được tải lần đầu tiên.

Lý do mà live()bây giờ bị mất giá là do nó được thực hiện kém. Để sử dụng live(), ban đầu bạn phải có thể chọn ít nhất một phần tử trong DOM (tôi tin là vậy). Nó cũng khiến một bản sao của hàm chạy bị ràng buộc với từng phần tử - và nếu bạn có 1000 phần tử, đó là rất nhiều hàm được sao chép.

Việc tạo ra on()hàm là để khắc phục những vấn đề đó. Nó cho phép bạn liên kết một trình xử lý sự kiện duy nhất với một đối tượng sẽ không thay đổi trong DOM (vì vậy bạn không thể sử dụng on()trên một phần tử sẽ bị xóa / thêm vào DOM sau này - hãy liên kết nó với một đối tượng mẹ) và chỉ cần áp dụng một phần tử "bộ lọc" để chức năng chỉ chạy khi nó được kết hợp với phần tử phù hợp với bộ chọn. Điều này có nghĩa là bạn chỉ có một hàm tồn tại (không phải một loạt các bản sao) bị ràng buộc với một phần tử duy nhất - một cách tiếp cận tốt hơn nhiều để thêm các sự kiện "trực tiếp" trong DOM.

... và đó là những khác biệt, và tại sao mỗi chức năng tồn tại và tại sao lại live()bị khấu hao.

• $("a").live()-> Nó sẽ áp dụng cho tất cả <a>, ngay cả khi nó được tạo sau khi nó được gọi.
• $("a").click()-> Nó sẽ chỉ áp dụng cho tất cả <a>trước khi điều này được gọi. (Đây là phím tắt của bind(), và on()trong 1.7)
• $("a").on()-> Cung cấp tất cả các chức năng cần thiết để đính kèm các trình xử lý sự kiện. (Mới nhất trong jQuery 1.7)

Báo giá :

Kể từ jQuery 1.7, phương thức .live () không được dùng nữa. Sử dụng .on () để đính kèm các trình xử lý sự kiện. Người dùng các phiên bản jQuery cũ hơn nên sử dụng .delegate () thay vì .live ().
Phương pháp này cung cấp một phương tiện để đính kèm các trình xử lý sự kiện được ủy quyền vào phần tử tài liệu của một trang, giúp đơn giản hóa việc sử dụng các trình xử lý sự kiện khi nội dung được thêm động vào một trang. Xem thảo luận về các sự kiện trực tiếp so với ủy quyền trong phương thức .on () để biết thêm thông tin.

Phương thức .on () gắn các trình xử lý sự kiện vào tập hợp các phần tử đang được chọn trong đối tượng jQuery. Kể từ jQuery 1.7, phương thức .on () cung cấp tất cả các chức năng cần thiết để đính kèm các trình xử lý sự kiện.

Đối với các phiên bản trước, phương thức .bind () được sử dụng để đính kèm một trình xử lý sự kiện trực tiếp vào các phần tử.

click()là một phím tắt cho phương thức không ủy quyền của on(). Vì thế:

$(".close-box").click() === $(".close-box").on('click')

Để ủy quyền các sự kiện với on(), tức là. trong các đối tượng được tạo động, bạn có thể làm:

$(document).on('click', '.close-box') // Same as $('.close-box').live()

Tuy nhiên, on()giới thiệu ủy quyền trong bất kỳ phần tử tĩnh nào, không chỉ documentnhư live()vậy, vì vậy:

$("#closestStaticElement").on('click', '.close-box')

Bạn nên đọc về sự khác biệt giữa livevàbind .

Tóm lại, livesử dụng ủy quyền sự kiện, cho phép bạn liên kết với các phần tử tồn tại ở hiện tại và trong tương lai.

Ngược lại, các trình xử lý được đính kèm thông qua bind(và các phím tắt của nó, chẳng hạn như click) sẽ gắn các trình xử lý trực tiếp vào các phần tử DOM phù hợp với bộ chọn và do đó chỉ bị ràng buộc với các phần tử hiện có.

Hệ quả của livetính linh hoạt là giảm hiệu suất, vì vậy chỉ sử dụng nó khi bạn cần chức năng mà nó cung cấp.

$el.click(fn) là một lối tắt cho $el.on('click', fn)

Xem http://api.jquery.com/click/ và http://api.jquery.com/on/ để biết thêm thông tin.

Khi bạn cần ràng buộc một số trình xử lý sự kiện, dynamically added elementsbạn phải sử dụng live(không được dùng nữa) hoặc onlàm cho nó hoạt động. Đơn giản là $('element').click(...);sẽ không hoạt động trên bất kỳ phần tử được thêm động nào vào DOM.

Tìm hiểu thêm về Sự khác biệt giữa .bind (), .live () và .delegate () của jQuery .

$ .click () chỉ là một phím tắt cho liên kết hoặc bật. Từ tài liệu jQuery:

Trong hai biến thể đầu tiên, phương thức này là một phím tắt cho .bind ("nhấp chuột", trình xử lý), cũng như .on ("nhấp chuột", trình xử lý) kể từ jQuery 1.7. Trong biến thể thứ ba, khi .click () được gọi mà không có đối số, nó là một phím tắt cho .trigger ("click").

Các .on()phương pháp xử lý sự kiện gắn với các thiết lập hiện đang được chọn của các yếu tố trong đối tượng jQuery. Các click()phương pháp liên kết với phương thức thụ lý sự kiện để "click" sự kiện JavaScript, hoặc kích hoạt sự kiện đó trên một phần tử.

Trong thực tế, .click(...nếu mục tiêu của bộ chọn thay đổi nhanh chóng (ví dụ: thông qua một số phản hồi ajax) thì bạn cần phải chỉ định lại hành vi.

Nó .on(...rất mới (jQuery 1.7) và nó có thể bao gồm kịch bản trực tiếp bằng cách sử dụng các sự kiện được ủy quyền, đây là cách nhanh hơn để đính kèm hành vi.

Trong onphương thức, trình xử lý sự kiện được gắn vào phần tử cha thay vì đích.

thí dụ: $(document).on("click", ".className", function(){});

Trong ví dụ trên, trình xử lý sự kiện nhấp chuột được đính kèm vào tài liệu. Và nó sử dụng sự kiện sôi sục để biết liệu ai đó đã nhấp vào phần tử mục tiêu hay không.