2012-01-15 20 views
10

Quiero detectar la inserción de un nuevo elemento divsolo como un hijo directo del padre div.DOM: ¿Cómo detectar un nuevo elemento secundario?

Ejemplo:

<div id="parent"> 
    <div id="child1"></div> 
    <div id="child2"></div> 
    <div id="newChild">I want this element to be detected</div> 
</div> 

El evento DOMNodeInserted() no es una solución para mí, ya que se activa en cada elemento de inserción, no sólo los niños.

igual:

<div id="parent"> 
    <div id="child1"> 
     <span>I don't want this new element to be detected</span> 
    </div> 
    <div id="child2"></div> 
    <div id="child3"></div> 
</div> 
+2

No se puede, que si una mejor solución como la que emite un evento antes de que se inyecte en el DOM – Raynos

+0

no tengo el verdadero código js de la página así que no sé eventos de brujas son usados. solo inyectando mi código en él para detectar algo –

+3

** DESCARGO DE RESPONSABILIDAD: ** DOMNodeInserted está en desuso. – Raynos

Respuesta

3

asuma que su controlador de eventos es el siguiente:

function(evt) { 
    // whatever 
} 

Dentro del controlador, evt.relatedNode es el elemento en el que se realiza la inserción. Puede encenderlo y decidir ignorar o procesar el evento.

See it in action.

+0

Jon, me salvaste , gracias :) –

+1

@NidhalRouissi - Para que lo sepas, esto no parece funcionar para mí en IE8. – jfriend00

+0

está bien, esto es para una extensión de Google Chrome –

0

Por qué no usas DOMNodeInserted, pero añadir un cheque/sentencia if-en el controlador de eventos por lo que la lógica real sólo se ejecuta cuando se quiere que?

+0

¿Puede explicar cómo ? –

+1

DOMNodeInserted no es compatible con IE (¿8 y abajo?) Y está obsoleto: http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted –

7

Utilice DOMNodeInserted en el elemento principal y marque el event.target.parentNode del elemento agregado. Si es id es parent, entonces el elemento es un descendiente directo.

Demostración: http://jsfiddle.net/ThinkingStiff/f2w7V/

document.getElementById('parent').addEventListener('DOMNodeInserted', function (event) { 

    if(event.target.parentNode.id == 'parent') { 
     //direct descendant   
    }; 

}, false); 
+0

No funcionó para mí, pero seguiré intentándolo –

+1

@NidhalRouissi ¿El enlace de demostración no lanzó una 'alerta()'? – ThinkingStiff

+0

utilicé http://jsfiddle.net/KEjke/1 –

Cuestiones relacionadas