div phát hiện jquery của một lớp nhất định đã được thêm vào DOM

Tôi đang sử dụng .on()để liên kết các sự kiện của div được tạo sau khi tải trang. Nó hoạt động tốt cho nhấp chuột, trung tâm chuột ... nhưng tôi cần biết khi một div mới của lớp MyClass được thêm vào. Tôi đang tìm kiếm cái này:

$('#MyContainer').on({

  wascreated: function () { DoSomething($(this)); }

}, '.MyClass');

Làm thế nào để tôi làm điều này? Tôi đã quản lý để viết toàn bộ ứng dụng của mình mà không có plugin và tôi muốn giữ nó theo cách đó.

Cảm ơn.

Trước đây người ta có thể móc vào domManipphương thức của jQuery để bắt tất cả các thao tác jQuery dom và xem những phần tử nào được chèn vào, v.v. nhưng nhóm jQuery đã tắt điều đó trong jQuery 3.0+ vì nó thường không phải là một giải pháp tốt để kết nối vào các phương thức jQuery theo cách đó và họ ' đã thực hiện nó để domManipphương thức nội bộ không còn khả dụng bên ngoài mã jQuery lõi.

Sự kiện đột biến cũng không được dùng nữa, như trước đây người ta có thể làm một số việc như

$(document).on('DOMNodeInserted', function(e) {
    if ( $(e.target).hasClass('MyClass') ) {
       //element with .MyClass was inserted.
    }
});

điều này nên tránh và ngày nay nên sử dụng Trình quan sát đột biến để thay thế, sẽ hoạt động như thế này

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.log(mutation)
        if (mutation.addedNodes && mutation.addedNodes.length > 0) {
            // element added to DOM
            var hasClass = [].some.call(mutation.addedNodes, function(el) {
                return el.classList.contains('MyClass')
            });
            if (hasClass) {
                // element has class `MyClass`
                console.log('element ".MyClass" added');
            }
        }
    });
});

var config = {
    attributes: true,
    childList: true,
    characterData: true
};

observer.observe(document.body, config);

Đây là plugin của tôi làm được điều đó - jquery.initialize

Useage giống như cách bạn sử dụng .eachhàm, nhưng với .initializehàm trên phần tử, điểm khác biệt .eachlà nó cũng sẽ khởi tạo các phần tử được thêm vào trong tương lai mà không cần bất kỳ mã bổ sung nào - bất kể bạn thêm nó bằng AJAX hay bất kỳ thứ gì khác.

Khởi tạo có cú pháp hoàn toàn giống với hàm .each

$(".some-element").initialize( function(){
    $(this).css("color", "blue");
});

Nhưng bây giờ nếu phần tử mới khớp với .some-element selector xuất hiện trên trang, nó sẽ được khởi tạo ngay lập tức. Cách thêm mục mới không quan trọng, bạn không cần quan tâm đến bất kỳ lệnh gọi lại nào, v.v.

$("<div/>").addClass('some-element').appendTo("body"); //new element will have blue color!

Plugin dựa trên MutationObserver

Sau khi xem lại bài đăng này và một số bài đăng khác, tôi đã cố gắng chắt lọc những gì tôi nghĩ là tốt nhất của mỗi bài thành một thứ đơn giản cho phép tôi phát hiện khi nào một lớp phần tử được chèn và sau đó hành động trên các phần tử đó .

function onElementInserted(containerSelector, elementSelector, callback) {

    var onMutationsObserved = function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.addedNodes.length) {
                var elements = $(mutation.addedNodes).find(elementSelector);
                for (var i = 0, len = elements.length; i < len; i++) {
                    callback(elements[i]);
                }
            }
        });
    };

    var target = $(containerSelector)[0];
    var config = { childList: true, subtree: true };
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
    var observer = new MutationObserver(onMutationsObserved);    
    observer.observe(target, config);

}

onElementInserted('body', '.myTargetElement', function(element) {
    console.log(element);
});

Điều quan trọng đối với tôi, điều này cho phép a) phần tử đích tồn tại ở bất kỳ độ sâu nào trong "addedNodes" và b) khả năng xử lý phần tử chỉ khi được chèn ban đầu (không cần tìm kiếm toàn bộ cài đặt tài liệu hoặc bỏ qua "đã được xử lý" cờ).

3 năm kinh nghiệm sau, đây là cách tôi lắng nghe "phần tử của một lớp nhất định được thêm vào DOM" : bạn chỉ cần thêm một hook vào html()hàm jQuery , như thế này:

function Start() {

   var OldHtml = window.jQuery.fn.html;

   window.jQuery.fn.html = function () {

     var EnhancedHtml = OldHtml.apply(this, arguments);

     if (arguments.length && EnhancedHtml.find('.MyClass').length) {

         var TheElementAdded = EnhancedHtml.find('.MyClass'); //there it is
     }

     return EnhancedHtml;
   }
}

$(Start);

Điều này hoạt động nếu bạn đang sử dụng jQuery, điều này tôi làm. Và nó không dựa vào sự kiện cụ thể của trình duyệt DOMNodeInserted, không tương thích với nhiều trình duyệt. Tôi cũng đã thêm cách triển khai tương tự cho.prepend()

Nhìn chung, điều này giống như một sự quyến rũ đối với tôi, và hy vọng đối với bạn cũng vậy.

bạn có thể sử dụng các sự kiện đột biến

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents

BIÊN TẬP

từ MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events

Không được dùng nữa Tính năng này đã bị xóa khỏi Web. Mặc dù một số trình duyệt có thể vẫn hỗ trợ nó, nhưng 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.

Trình quan sát đột biến là sự thay thế được đề xuất cho các sự kiện đột biến trong DOM4. Chúng sẽ được đưa vào Firefox 14 và Chrome 18.

https://developer.mozilla.org/en/docs/Web/API/MutationObserver

MutationObservercung cấp cho các nhà phát triển một cách để phản ứng với những thay đổi trong DOM. Nó được thiết kế để thay thế cho Sự kiện đột biến được xác định trong đặc tả Sự kiện DOM3.

Ví dụ sử dụng

Ví dụ sau được lấy từ http://hacks.mozilla.org/2012/05/dom-mutationobserver-reaction-to-dom-changes-without-killing-browser-performance/ .

// select the target node
var target = document.querySelector('#some-id');

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

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);

// later, you can stop observing
observer.disconnect();

Hai bổ sung cho câu trả lời của adeneo:

(1) chúng ta có thể thay đổi dòng

return el.classList.contains('MyClass');

Đến

if( el.classList ) {
    return el.classList.contains('MyClass');
} else {
    return false;
}

Vì vậy, chúng tôi sẽ không thấy "Uncaught TypeError: Cannot read property 'contains' of undefined"lỗi.

(2) thêm subtree: truevào configđể tìm các nút đã thêm một cách đệ quy trong tất cả các phần tử được thêm vào.