jquery che rileva div di una determinata classe è stato aggiunto a DOM

Sto usando .on()per associare eventi di div che vengono creati dopo il caricamento della pagina. Funziona bene per click, mouseenter ... ma ho bisogno di sapere quando è stato aggiunto un nuovo div della classe MyClass. Sto cercando questo:

$('#MyContainer').on({

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

}, '.MyClass');

Come faccio a fare questo? Sono riuscito a scrivere la mia intera app senza un plug-in e voglio mantenerla così.

Grazie.

In precedenza si poteva collegarsi al domManipmetodo di jQuery per catturare tutte le manipolazioni di jQuery dom e vedere quali elementi erano inseriti ecc. Ma il team di jQuery lo ha spento in jQuery 3.0+ in quanto generalmente non è una buona soluzione agganciarsi ai metodi jQuery in questo modo, e loro ' Abbiamo fatto in modo che il domManipmetodo interno non sia più disponibile al di fuori del codice jQuery principale.

Anche gli eventi di mutazione sono stati deprecati, poiché prima si poteva fare qualcosa di simile

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

questo dovrebbe essere evitato, e oggi dovrebbero essere usati gli osservatori di mutazione, che funzionerebbero in questo modo

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

Ecco il mio plugin che fa esattamente questo: jquery.initialize

L'utilizzo è lo stesso come si usa la .eachfunzione, ma con la .initializefunzione sull'elemento, a differenza di.each è che inizializzerà anche gli elementi aggiunti in futuro senza alcun codice aggiuntivo, non importa se lo aggiungi con AJAX o qualsiasi altra cosa.

Initialize ha esattamente la stessa sintassi della funzione .each

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

Ma ora se sulla pagina apparirà un nuovo elemento che corrisponde a .some-element selector, verrà inizializzato istantaneamente. Il modo in cui viene aggiunto il nuovo elemento non è importante, non è necessario preoccuparsi di eventuali richiamate ecc.

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

Il plugin è basato su MutationObserver

Dopo aver esaminato questo e molti altri post, ho cercato di distillare ciò che pensavo fosse il migliore di ciascuno in qualcosa di semplice che mi permettesse di rilevare quando una classe di elementi viene inserita e quindi agire su quegli elementi .

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

È importante sottolineare che per me questo consente a) l'elemento di destinazione di esistere a qualsiasi profondità all'interno di "addedNodes" eb) la capacità di gestire l'elemento solo quando inizialmente inserito (non è necessario cercare nell'intero documento l'impostazione o ignorare "già elaborato" bandiere).

3 anni di esperienza dopo, è così che ascolto "elemento di una certa classe aggiunto al DOM" : aggiungi semplicemente un hook alla html()funzione jQuery , in questo modo:

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

Funziona se stai usando jQuery, cosa che faccio io. E non si basa sull'evento specifico del browser DOMNodeInserted, che non è compatibile con tutti i browser. Ho anche aggiunto la stessa implementazione per.prepend()

Nel complesso, questo funziona come un fascino per me e, si spera, anche per te.

potresti usare eventi di mutazione

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

MODIFICARE

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

Deprecato Questa funzionalità è stata rimossa dal Web. Sebbene alcuni browser possano ancora supportarlo, è in procinto di essere abbandonato. Non utilizzarlo in progetti vecchi o nuovi. Le pagine o le app Web che lo utilizzano potrebbero interrompersi in qualsiasi momento.

Gli osservatori di mutazione sono la sostituzione proposta per gli eventi di mutazione in DOM4. Devono essere inclusi in Firefox 14 e Chrome 18.

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

MutationObserverfornisce agli sviluppatori un modo per reagire ai cambiamenti in un DOM. È progettato come sostituto degli eventi di mutazione definiti nella specifica degli eventi DOM3.

Utilizzo di esempio

Il seguente esempio è stato preso da 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();

Due aggiunte alla risposta di Adeneo:

(1) possiamo cambiare la linea

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

Per

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

Quindi non vedremo l' "Uncaught TypeError: Cannot read property 'contains' of undefined"errore.

(2) Aggiungere subtree: truea configtrovare i nodi aggiunti ricorsivamente in tutti gli elementi aggiunti.