Tiện ích mở rộng của Chrome: kích hoạt sự kiện khi phần tử được tạo?

Question

Tôi muốn kích hoạt sự kiện khi phần tử được thêm vào tài liệu. Tôi đã đọc JQuery documentation for on() và list of events nhưng không có sự kiện nào dường như liên quan đến việc tạo yếu tố.

tôi phải dõi DOM như tôi không kiểm soát được khi nguyên tố này sẽ được thêm vào tài liệu (như Javascript của tôi là một nội dung kịch bản Chrome Extension)

Answer 1

Tôi biết đây là câu hỏi cũ, đã có câu trả lời nhưng vì mọi thứ đã thay đổi, tôi nghĩ tôi sẽ thêm câu trả lời cập nhật cho những người truy cập trang này đang tìm câu trả lời.

DOM Mutation Events không được dùng nữa. Theo MDN (liên quan đến DOM Mutation Events):

Không dùng nữa
Tính năng này đã bị xóa khỏi trang web. Mặc dù một số trình duyệt vẫn có thể hỗ trợ nó, nó đang trong quá trình bị loại bỏ. Không sử dụng nó trong các dự án cũ hoặc mới. Các trang hoặc ứng dụng web sử dụng nó có thể bị hỏng bất cứ lúc nào.

Bạn nên sử dụng MutationObserver API mới, cũng hiệu quả hơn.
(Thư viện mutation-summary hiện nay cung cấp một inteface hữu ích để API mới này.) Sử dụng

Ví dụ:

/* Create an observer instance */ 
var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
     console.log(mutation.type); 
    }); 
}); 

/* Config info for the observer */ 
var config = { 
    "childList": true, 
    "subtree": true 
}; 

/* Observe the body and its (descendants) for "childList" changes */ 
observer.observe(document.body, config); 

/* Stop the observer, when it is not required any more */ 
observer.disconnect(); 

Answer 2

Đối với tùy chọn đơn giản nhất, bạn có thể muốn xem xét LiveQuery có hiệu quả là 'người nghe DOM' mà bạn đang theo dõi. Nó nên được sử dụng một cách thận trọng tuy nhiên, vì nó có tiềm năng được khá nặng, hiệu suất khôn ngoan.

Nếu bạn thích 'cuộn của riêng bạn' - bằng .on() nó nên hoạt động cho tất cả các thành phần hiện tại và tương lai - nhưng các yếu tố được thêm sẽ cần phải khớp với công cụ chọn. Ví dụ: nếu bạn kết nối một sự kiện với tất cả các lớp là .myClass và sau đó bạn đã thêm một phần tử mới của cùng một lớp vào DOM, sự kiện sẽ kích hoạt. Hiệu quả, .on() API roll-up bind/live/delegate từ các phiên bản trước của jQuery, hai trong số đó làm việc với các phần tử DOM hiện tại và tương lai.

Answer 3

Là một bổ sung cho câu trả lời của @ SpaceBison, bạn có thể tạo sự kiện của riêng mình khi bạn tạo các yếu tố này. Ví dụ:

function create_element() { 
    // Create an element 
    $('body').append("<p>Testing..</p>") 
    // Trigger 
    $('body').trigger('elementCreated'); 
} 
function monitor_elements() { 
    $("body").on("elementCreated", function(event){ 
    alert('One more'); 
    }); 
} 

$(document).ready(function(){ 

    monitor_elements(); 

    for (var i=0; i < 3; i++) { 
     create_element(); 
    } 

}); 

Sống dụ: http://jsfiddle.net/9NsAh/

Nhưng tất nhiên, nó chỉ hữu ích khi bạn tạo các yếu tố của riêng bạn.

Answer 4

Như đã đề cập, tôi không tạo các phần tử của riêng mình, vì vậy, hãy tắt một sự kiện khi tôi tạo phần tử không phải là một tùy chọn.

Giải pháp tốt nhất cho điều này là Trình theo dõi đột biến API, trong đó Mutation Summary cung cấp giao diện thân thiện.