¿Cómo puedo detectar cuándo se ha agregado un nuevo elemento al documento en jquery?

Question

¿Cómo puedo detectar cuándo se ha agregado un nuevo elemento al documento en jquery?

Explicación: Quiero saber cuando un elemento con clase "column-header" ha sido agregado al documento. Como planeo ejecutar algunos javascript en esos elementos.

¿Cómo puedo hacer esto? Yo uso jQuery javascript library.

Answer 1

Si usted quiere hacer algo de jQuery en él, también se puede hacer algo como 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. 
}); 

ACTUALIZACIÓN: Parece que el enlace estaba roto. Trate this link

Answer 2

probar este ...

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

o también puede hacer algo como this..it será más genérico

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

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

Answer 3

Debe retirar la jQuery Mutation Events. Creo que es lo que estás buscando.

Answer 4

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

DOMNodeInserted es un evento de nivel 3 DOM. Eso a su vez significa que necesita un navegador bastante nuevo para admitir ese tipo de evento.

Referencia: MDC

Answer 5

si desea establecer mismas funciones para todos los elementos con class column-header entonces puede usar jQuery en vivo()

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

Answer 6

¿Cómo sobre el uso de una encuesta - mantener la búsqueda de un elemento con clase " column-header ", hasta que lo encuentre y luego realice una acción. Parece simple.

Answer 7

Usaría setInterval para buscar elementos repetidamente. p.ej.

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

este código va a comprobar que no existen nuevos elementos .colum de cabecera de cada 100 ms

Answer 8

Creo que el método DOMNodeInserted mencionado anteriormente es probablemente la opción más atractiva, pero si usted necesita algo que se va a trabajar con IE8 e inferior, que podría hacer algo como lo siguiente:

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

eso es sólo la idea básica, se puede cambiar que le apetezca, hacer un método fuera de él, mantenga el valor de retorno de la función setInterval para que puede detenerlo, o lo que sea que necesites hacer. Pero debería hacer el trabajo.

Answer 9

Hasta 2013 MutationEvents están en desuso. Si alguien más tiene problemas de detección de nuevos elementos en el DOM, puede utilizar MutationObservers lugar: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Answer 10

La respuesta aceptada utiliza un plugin obsoleta a partir de 2011 y la más alta respuesta upvoted utiliza eventos de mutación que son ahora deprecated.

Hoy, un MutationObserver es lo que debe usar para detectar cuando un elemento se ha agregado al DOM. MutationObservers ahora son ampliamente compatibles en todos los navegadores modernos (Chrome 26+, Firefox 14+, IE11, Edge, Opera 15+, etc.).

Aquí hay un ejemplo simple de cómo puede usar un MutationObserver para escuchar cuando un elemento se agrega al DOM.

Para abreviar, estoy usando la sintaxis de jQuery para construir el nodo e insertarlo en el 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! 

El controlador de eventos observer se disparará cada vez que se añade o se elimina de la document cualquier nodo. Dentro del controlador, realizamos una comprobación contains para determinar si myElement se encuentra ahora en el document.

No necesita iterar sobre cada registro de mutación almacenado en mutations porque puede realizar la comprobación document.contains directamente al myElement.

Para mejorar el rendimiento, reemplace document con el elemento específico que contendrá myElement en el DOM.