特定のクラスのdivを検出するjqueryがDOMに追加されました

.on()ページの読み込み後に作成されるdivのイベントをバインドするために使用しています。クリック、mouseenterで問題なく動作します...しかし、クラスMyClassの新しいdivがいつ追加されたかを知る必要があります。私はこれを探しています：

$('#MyContainer').on({

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

}, '.MyClass');

どうすればよいですか？プラグインなしでアプリ全体を作成できたので、そのままにしておきたいと思います。

ありがとう。

以前は、jQueryのdomManipメソッドにフックしてすべてのjQuery dom操作をキャッチし、挿入された要素などを確認できましたが、jQuery 3.0以降では、jQueryメソッドにフックするのは一般的に適切なソリューションではないため、jQueryチームはそれをシャットダウンしました。内部domManipメソッドがコアjQueryコードの外部で使用できなくなるようにしました。

以前のように、ミューテーションイベントも非推奨になりました。

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

これは回避する必要があり、今日は代わりにMutationObserversを使用する必要があります。これは次のように機能します。

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

これが正確にそれを行う私のプラグインです--jquery.initialize

使用法は.eachfunctionを使用する場合と同じですが、.initializefunction on elementを使用.eachすると、AJAXなどで追加するかどうかに関係なく、追加のコードなしで将来追加される要素も初期化されるという違いがあります。

初期化は、.each関数とまったく同じ構文を持っています

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

しかし、.some-elementセレクターに一致する新しい要素がページに表示されると、すぐに初期化されます。新しいアイテムを追加する方法は重要ではありません。コールバックなどを気にする必要はありません。

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

プラグインはに基づいています MutationObserver

これと他のいくつかの投稿を確認した後、要素のクラスが挿入されたことを検出し、それらの要素に作用することを可能にする単純なものに、それぞれの最良だと思うものを抽出しようとしました。

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

私にとって重要なことは、これにより、a）ターゲット要素が「addedNodes」内の任意の深さに存在し、b）最初に挿入されたときにのみ要素を処理する機能（ドキュメント設定全体を検索したり、「処理済み」を無視したりする必要がない）フラグ）。

3年後の経験で、これが「DOMに追加された特定のクラスの要素」を聞く方法です。次のhtml()ように、jQuery関数にフックを追加するだけです。

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

これは、私が行っているjQueryを使用している場合に機能します。またDOMNodeInserted、クロスブラウザ互換ではないブラウザ固有のイベントに依存しません。同じ実装を追加しました.prepend()

全体として、これは私にとって、そしてうまくいけばあなたにとっても魅力のように機能します。

突然変異イベントを使用できます

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

編集

MDNから：https：//developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events

非推奨この機能はWebから削除されました。一部のブラウザはまだそれをサポートしているかもしれませんが、それは削除されている途中です。古いプロジェクトや新しいプロジェクトでは使用しないでください。それを使用しているページやWebアプリはいつでも壊れることがあります。

ミューテーションオブザーバーは、DOM4のミューテーションイベントの代替案です。これらはFirefox14とChrome18に含まれる予定です。

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

MutationObserver開発者にDOMの変更に対応する方法を提供します。これは、DOM3イベント仕様で定義されているミューテーションイベントの代わりとして設計されています。

使用例

次の例は、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();

adeneoの答えへの2つの追加：

（1）行を変更できます

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

に

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

したがって、"Uncaught TypeError: Cannot read property 'contains' of undefined"エラーは表示されません。

（2）追加subtree: trueしconfigて、追加されたすべての要素で追加されたノードを再帰的に検索します。