Phương thức jQuery .live () vs .on () để thêm một sự kiện nhấp chuột sau khi tải html động

Tôi đang sử dụng jQuery v.1.7.1 trong đó phương thức .live () rõ ràng không dùng nữa.

Vấn đề tôi gặp phải là khi tải động html vào một phần tử bằng cách sử dụng:

$('#parent').load("http://..."); 

Nếu tôi thử và thêm một sự kiện nhấp chuột sau đó thì nó không đăng ký sự kiện bằng một trong các phương pháp sau:

$('#parent').click(function() ...); 

hoặc là

// according to documentation this should be used instead of .live()
$('#child').on('click', function() ...); 

Cách chính xác để đạt được chức năng này là gì? Nó dường như chỉ hoạt động với .live () đối với tôi, nhưng tôi không nên sử dụng phương thức đó. Lưu ý rằng #child là một phần tử được tải động.

Cảm ơn.

Nếu bạn muốn trình xử lý nhấp hoạt động cho một phần tử được tải động, thì bạn đặt trình xử lý sự kiện trên một đối tượng cha (không được tải động) và cung cấp cho nó một bộ chọn phù hợp với đối tượng động của bạn như thế này:

$('#parent').on("click", "#child", function() {});

Trình xử lý sự kiện sẽ được gắn vào #parentđối tượng và bất cứ khi nào một sự kiện nhấp vào bong bóng bắt nguồn từ #childnó, nó sẽ kích hoạt trình xử lý nhấp chuột của bạn. Điều này được gọi là xử lý sự kiện được ủy nhiệm (việc xử lý sự kiện được ủy quyền cho một đối tượng cha).

Nó được thực hiện theo cách này bởi vì bạn có thể đính kèm sự kiện vào #parentđối tượng ngay cả khi #childđối tượng chưa tồn tại, nhưng khi nó tồn tại và được nhấp vào, sự kiện nhấp sẽ nổi lên #parentđối tượng, nó sẽ thấy rằng nó bắt nguồn từ #childvà có một trình xử lý sự kiện cho một nhấp chuột #childvà kích hoạt sự kiện của bạn.

Thử cái này:

$('#parent').on('click', '#child', function() {
    // Code
});

Từ $.on()tài liệu:

Trình xử lý sự kiện chỉ bị ràng buộc với các yếu tố hiện được chọn; chúng phải tồn tại trên trang tại thời điểm mã của bạn thực hiện cuộc gọi đến .on().

#childPhần tử của bạn không tồn tại khi bạn gọi $.on()nó, vì vậy sự kiện không bị ràng buộc (không giống như $.live()). #parenttuy nhiên, không tồn tại, vì vậy ràng buộc sự kiện đó là tốt.

Đối số thứ hai trong mã của tôi ở trên hoạt động như một 'bộ lọc' để chỉ kích hoạt nếu sự kiện nổi lên #parenttừ đó #child.

$(document).on('click', '.selector', function() { /* do stuff */ });

EDIT: Tôi đang cung cấp thêm một chút thông tin về cách thức hoạt động của nó, bởi vì ... từ. Với ví dụ này, bạn đang đặt một người nghe trên toàn bộ tài liệu.

Khi bạn clicktrên bất kỳ (các) yếu tố nào phù hợp .selector, sự kiện sẽ nổi lên trên tài liệu chính - miễn là không có người nghe nào khác gọi event.stopPropagation()phương thức đó - điều này sẽ dẫn đến sự sủi bọt của một sự kiện đối với các phần tử cha.

Thay vì liên kết với một yếu tố cụ thể hoặc tập hợp các yếu tố, bạn đang lắng nghe bất kỳ sự kiện nào đến từ các yếu tố phù hợp với bộ chọn đã chỉ định. Điều này có nghĩa là bạn có thể tạo một người nghe, một lần, sẽ tự động khớp với các phần tử hiện có cũng như bất kỳ phần tử được thêm động nào.

Điều này là thông minh vì một vài lý do, bao gồm cả việc sử dụng hiệu năng và bộ nhớ (trong các ứng dụng quy mô lớn)

BIÊN TẬP:

Rõ ràng, yếu tố cha mẹ gần nhất mà bạn có thể nghe là tốt hơn và bạn có thể sử dụng bất kỳ yếu tố nào thay cho documentnhững đứa trẻ bạn muốn theo dõi các sự kiện nằm trong yếu tố cha mẹ đó ... nhưng điều đó thực sự không có gì để làm với câu hỏi

Tương đương với .live () trong 1.7 trông như thế này:

$(document).on('click', '#child', function() ...); 

Về cơ bản, hãy xem tài liệu cho các sự kiện nhấp chuột và lọc chúng cho #child.

Tôi biết rằng hơi muộn cho một câu trả lời, nhưng tôi đã tạo ra một polyfill cho phương thức .live (). Tôi đã thử nghiệm nó trong jQuery 1.11 và có vẻ như nó hoạt động khá tốt. Tôi biết rằng chúng tôi phải triển khai phương thức .on () bất cứ khi nào có thể, nhưng trong các dự án lớn, nơi không thể chuyển đổi tất cả các lệnh gọi .live () thành các lệnh tương ứng .on () vì bất kỳ lý do gì, có thể sau đây công việc:

if(jQuery && !jQuery.fn.live) {
    jQuery.fn.live = function(evt, func) {
        $('body').on(evt, this.selector, func);
    }
}

Chỉ cần bao gồm nó sau khi bạn tải jQuery và trước khi bạn gọi trực tiếp ().

.on () dành cho jQuery phiên bản 1.7 trở lên. Nếu bạn có phiên bản cũ hơn, hãy sử dụng:

$("#SomeId").live("click",function(){
    //do stuff;
});

Tôi đã sử dụng 'live' trong dự án của mình nhưng một người bạn của tôi đã gợi ý rằng tôi nên sử dụng 'on' thay vì live. Và khi tôi cố gắng sử dụng, tôi đã gặp phải một vấn đề như bạn gặp phải.

Trên trang của tôi, tôi tạo các nút bảng hàng và nhiều công cụ dom động. nhưng khi tôi sử dụng phép thuật thì biến mất.

Các giải pháp khác như sử dụng nó như một đứa trẻ chỉ cần gọi các chức năng của bạn mỗi lần nhấp chuột. Nhưng tôi tìm một cách để làm cho nó xảy ra một lần nữa và đây là giải pháp.

Viết mã của bạn dưới dạng:

function caller(){
    $('.ObjectYouWntToCall').on("click", function() {...magic...});
}

Gọi người gọi (); sau khi bạn tạo đối tượng của bạn trong trang như thế này.

$('<dom class="ObjectYouWntToCall">bla... bla...<dom>').appendTo("#whereeveryouwant");
caller();

Bằng cách này, chức năng của bạn được gọi khi nó được cho là không phải mỗi lần nhấp vào trang.