jqueryでドキュメントに新しい要素が追加されたことを検出するにはどうすればよいですか？

Question

jqueryでドキュメントに新しい要素が追加されたときは、どうすれば検出できますか？

説明： "column-header"クラスの要素が文書にいつ追加されたかを知りたいと思います。私はこれらの要素にいくつかのjavascriptを実行する予定です。

どうすればいいですか？私はjQueryのjavascriptライブラリを使用します。

Answer 1

、あなたもlivequery (extra plugin)ような何かを行うことができます。投票を使用することについてどのように

$(".column-header").live("click",function(){}); 

Answer 2

...

if($('.column-header')){ 
//do something... 
} 

か、またthis..itあなたはjQuery Mutation Eventsをチェックアウトする必要があり、より汎用的な

jQuery.exists = function(selector) { return ($(selector).length > 0); } 

if ($(selector).exists()) { 
    // Do something 
} 

Answer 3

になりますような何かを行うことができます。これを試してみてください私はそれがあなたが探しているものだと信じています。

Answer 4

$(document).bind('DOMNodeInserted', function(e) { 
    console.log(e.target, ' was inserted'); 
}); 

DOMNodeInsertedはDOMレベル3イベントです。つまり、そのようなイベントをサポートするには、かなり新しいブラウザが必要です。

参考：リンクが壊れていたようです ：

$('column-header').livequery(function() 
{ 
    // do things here with your column-header, like binding new events and stuff. 
    // this function is called when an object is added. 
    // check the API for the deletion function and so on. 
}); 

UPDATE：あなたはそれにいくつかのjQueryをしたい場合はMDC

Answer 5

を試してみてください - "クラスを持つ要素を探し続けますあなたがそれを見つけて行動を起こすまで、「列ヘッダー」を押してください。シンプルですね。

Answer 6

）あなたはクラスcolumn-header を持つすべての要素のために同じ機能を設定したいなら、あなたはjqueryの（住んで使用することができますthis link

Answer 7

私はsetIntervalを使って繰り返し要素をチェックします。例えば。

var curLength=0; 
setInterval(function(){ 
    if ($('.column-header').length!=curLength){ 
    curLength=$('.column-header').length; 
    // do stuff here 
    } 
},100); 

このコードは100ミリ秒ごと

Answer 8

任意の新しい.colum-ヘッダ要素をチェックします私は、上記のDOMNodeInserted方法は、おそらく最もセクシーな選択だと思いますが、あなたはで動作するように起こっている何かを必要とする場合IE8と下は、あなたのような何かを行うことができ、次の、あなたが欲しいところが、それから方法を作ることだけで基本的な考え方に変更することができますされ

// wrap this up in en immediately executed function so we don't 
// junk up our global scope. 
(function() { 
    // We're going to use this to store what we already know about. 
    var prevFound = null; 

    setInterval(function() { 
     // get all of the nodes you care about. 
     var newFound = $('.yourSelector'); 

     // get all of the nodes that weren't here last check 
     var diff = newFound.not(prevFound); 

     // do something with the newly added nodes 
     diff.addClass('.justGotHere'); 

     // set the tracking variable to what you've found. 
     prevFound = newFound; 
    }, 100); 
})(); 

は、あなたのためのsetIntervalの戻り値を保ちますそれを止めることができますか、何をする必要があります。しかし、それは仕事を完了する必要があります。

Answer 9

2013年まではMutationEventsは推奨されていません。他の誰がDOMに新しい要素を検出する問題を持っている場合は、代わりにMutationObserversを使用することができます。 https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Answer 10

受け入れ答えは、2011年から廃止されたプラグインを使用し、最高のupvoted答えは今deprecatedあり、変異イベントを使用しています。

今日、MutationObserverは、要素がDOMに追加されたことを検出するために使用する必要があります。 MutationObserversは現代のすべてのブラウザ（Chrome 26+、Firefox 14+、IE11、Edge、Opera 15+など）で広くサポートされるようになりました。

ここでは、MutationObserverを使用して要素がDOMに追加されたときをリッスンする方法の簡単な例を示します。

簡潔にするために、私はノードを構築してDOMに挿入するためにjQuery構文を使用しています。任意のノードが追加またはdocumentから除去されるたびに

var myElement = $("<div>hello world</div>")[0]; 

var observer = new MutationObserver(function(mutations) { 
    if (document.contains(myElement)) { 
     console.log("It's in the DOM!"); 
     observer.disconnect(); 
    } 
}); 

observer.observe(document, {attributes: false, childList: true, characterData: false, subtree:true}); 

$("body").append(myElement); // console.log: It's in the DOM! 

observerイベントハンドラがトリガされます。ハンドラ内でcontainsのチェックを実行してmyElementがdocumentにあるかどうかを確認します。

mutationsに格納されている各MutationRecordを反復処理する必要はありません。myElementに直接document.containsのチェックを行うことができます。

パフォーマンスを向上させるには、documentを、DOMにmyElementを含む特定の要素に置き換えます。