如何在jquery中檢測何時將新元素添加到文檔中？

Question

如何在jquery中檢測何時將新元素添加到文檔中？

說明： 我想知道何時將具有類「列標題」的元素添加到文檔中。正如我計劃在這些元素上運行一些JavaScript。

我該怎麼做？我使用jQuery JavaScript庫。

Answer 1

如果你想要做一些jQuery的就可以了，你也可以這樣做livequery (extra plugin)：

$('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： 看來，鏈接被打破。嘗試this link

Answer 2

試試這個...

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

，或者你也可以這樣做this..it將更加通用

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

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

Answer 3

你應該看看jQuery Mutation Events。我相信這是你正在尋找的。

Answer 4

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

DOMNodeInserted是DOM級別3事件。這反過來意味着，你需要一個相當新的瀏覽器來支持這種事件。

參考：MDC

Answer 5

，如果你想設置相同功能的所有類的元素column-header 然後你可以使用jQuery的生活（）

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

Answer 6

如何使用投票 - 繼續尋找具有類元素「列標題「，直到找到它，然後執行操作。看起來很簡單。

Answer 7

我會使用setInterval重複檢查元素。例如。

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

此代碼將檢查是否有任何新的.colum-header元素，每100毫秒

Answer 8

我認爲上面提到的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。

爲簡潔起見，我使用jQuery語法構建節點並將其插入到DOM中。

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事件處理程序將觸發每當任何節點被添加或從document除去。在處理程序內部，我們然後執行contains檢查以確定myElement現在是否在document中。

因爲您可以直接在myElement上執行document.contains檢查，所以不需要遍歷存儲在mutations中的每個MutationRecord。

要提高性能，請將document替換爲DOM中包含myElement的特定元素。