jquery detecting div dari kelas tertentu telah ditambahkan ke DOM

Saya menggunakan .on()untuk mengikat acara div yang dibuat setelah halaman dimuat. Ini berfungsi dengan baik untuk klik, mouseenter ... tetapi saya perlu tahu kapan div baru kelas MyClass telah ditambahkan. Saya mencari ini:

$('#MyContainer').on({

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

}, '.MyClass');

Bagaimana saya melakukan ini? Saya telah berhasil menulis seluruh aplikasi saya tanpa plugin dan saya ingin tetap seperti itu.

Terima kasih.

Sebelumnya seseorang dapat menghubungkan ke domManipmetode jQuery untuk menangkap semua manipulasi dom jQuery dan melihat elemen apa yang dimasukkan, dll. Tetapi tim jQuery menutupnya di jQuery 3.0+ karena umumnya bukan solusi yang baik untuk menghubungkan ke metode jQuery seperti itu, dan mereka ' telah membuatnya sehingga domManipmetode internal tidak lagi tersedia di luar kode inti jQuery.

Peristiwa Mutasi juga telah ditinggalkan, seperti sebelumnya orang dapat melakukan sesuatu seperti itu

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

ini harus dihindari, dan hari ini Pengamat Mutasi harus digunakan sebagai gantinya, yang akan bekerja seperti ini

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);

Ini adalah plugin saya yang melakukannya - jquery.initialize

Penggunaannya sama seperti Anda menggunakan .eachfungsi, tetapi dengan .initializefungsi pada elemen, perbedaan dari .eachitu juga akan menginisialisasi elemen yang ditambahkan di masa mendatang tanpa kode tambahan - tidak peduli jika Anda menambahkannya dengan AJAX atau yang lainnya.

Inisialisasi memiliki sintaks yang sama persis dengan fungsi .each

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

Tetapi sekarang jika elemen baru yang cocok dengan .some-element selector akan muncul di halaman, itu akan langsung diinisialisasi. Cara item baru ditambahkan tidak penting, Anda tidak perlu peduli dengan callback, dll.

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

Plugin didasarkan pada MutationObserver

Setelah meninjau ini dan beberapa posting lainnya, saya mencoba menyaring apa yang saya anggap terbaik dari masing-masing menjadi sesuatu yang sederhana yang memungkinkan saya untuk mendeteksi ketika kelas elemen dimasukkan dan kemudian bertindak atas elemen tersebut .

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);
});

Yang penting bagi saya, ini memungkinkan a) elemen target ada pada kedalaman apa pun dalam "addedNodes" dan b) kemampuan untuk menangani elemen hanya saat pertama kali dimasukkan (tidak perlu mencari seluruh pengaturan dokumen atau mengabaikan "sudah diproses" bendera).

Pengalaman 3 tahun kemudian, inilah cara saya mendengarkan "elemen kelas tertentu ditambahkan ke DOM" : Anda cukup menambahkan pengait ke dalam html()fungsi jQuery , seperti ini:

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);

Ini berfungsi jika Anda menggunakan jQuery, yang saya lakukan. Dan itu tidak bergantung pada acara khusus browser DOMNodeInserted, yang tidak kompatibel lintas-browser. Saya juga menambahkan implementasi yang sama untuk.prepend()

Secara keseluruhan, ini berfungsi seperti pesona bagi saya, dan mudah-mudahan juga untuk Anda.

Anda bisa menggunakan peristiwa mutasi

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

EDIT

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

Tidak Berlaku Lagi Fitur ini telah dihapus dari Web. Meskipun beberapa browser mungkin masih mendukungnya, ini sedang dalam proses pelepasan. Jangan gunakan di proyek lama atau baru. Halaman atau aplikasi Web yang menggunakannya dapat rusak kapan saja.

Mutation Observers adalah pengganti yang diusulkan untuk kejadian mutasi di DOM4. Mereka akan disertakan dalam Firefox 14 dan Chrome 18.

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

MutationObservermemberi pengembang cara untuk bereaksi terhadap perubahan di DOM. Ini dirancang sebagai pengganti Peristiwa Mutasi yang ditentukan dalam spesifikasi Peristiwa DOM3.

Contoh penggunaan

Contoh berikut diambil dari http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-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();

Dua tambahan jawaban adeneo:

(1) kita dapat mengubah garis

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

Untuk

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

Jadi kami tidak akan melihat "Uncaught TypeError: Cannot read property 'contains' of undefined"kesalahannya.

(2) add subtree: truedi configuntuk menemukan node ditambahkan secara rekursif dalam semua elemen menambahkan.