jQuery khi tải phần tử động

Question

Tôi đang cố gắng thực hiện một số thao tác có điều kiện của các phần tử được thêm động vào một số vùng chứa trên một trang, nhưng tôi thiếu một sự kiện.

Nói rằng tôi có một container:

<div id="container"></div> 

tôi có thể dễ dàng gắn một event handler đến chức năng nhấp chuột cho tất cả các yếu tố mới, sử dụng

$('#container').on('click', '.sub-element', function() { ... }); 

Nhưng điều gì làm tôi liên kết với để nhận móc "một lần" khi phần tử được thêm vào #container. Tôi đã cố gắng liên kết với ready và load vô ích. Có cách nào để làm điều này, hay tôi phải đưa ra một giải pháp cho vấn đề của tôi?

This fiddle contains my non-working example.

Answer 1

Bạn có thể kích hoạt một sự kiện tùy chỉnh trên phần tử DOM mới được bổ sung có thể được nhặt lên bởi một jQuery xử lý sự kiện:

//bind to our custom event for the `.sub-element` elements 
$('#container').on('custom-update', '.sub-element', function(){ 
    $(this).html('<b>yaay!</b>'); 
}); 

//append a new element to the container, 
//then select it, based on the knowledge that it is the last child of the container element, 
//and then trigger our custom event on the element 
$('#container').append('<div class="sub-element">No worky!</div>').children().last().trigger('custom-update'); 

Đây là một bản demo: http://jsfiddle.net/ggHh7/4/

Phương pháp này cho phép bạn làm một cái gì đó trên toàn cầu ngay cả khi bạn tải nội dung động thông qua các phương pháp khác nhau.

Cập nhật

Tôi không chắc chắn về sự hỗ trợ trình duyệt (Tôi sẽ giả IE8 và cũ không hỗ trợ này) nhưng bạn có thể sử dụng các sự kiện DOMNodeInserted đột biến để phát hiện khi một phần tử DOM được thêm vào:

$('#container').on('DOMNodeInserted', '.sub-element', function(){ 
    $(this).html('<b>yaay!</b>'); 
}) 

$('#container').append('<div class="sub-element">No worky!</div>'); 

đây là một bản demo: http://jsfiddle.net/ggHh7/7/

CẬP NHẬT

có một API mới cho thi s là DOMNodeInserted bị khấu hao tại thời điểm này. Tôi đã không nhìn vào nó nhưng nó được gọi là MutationOvserver: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Answer 2

Sau khi đọc câu trả lời ở trên bây giờ tôi sử dụng này thành công:

$('body').on({ 
    DOMNodeInserted : function(){ 
     alert('I have been added dynamically'); 
    }, 
    click : function(){ 
     alert('I was clicked'); 
    }, 
    '.dynamicElements' 
}); 

Bây giờ tất cả của tôi dynamicElements thể làm công cụ như họ đang nạp, sử dụng tuyệt vời .on() bản đồ sự kiện.