2012-01-15 2 views
10

새로운 div 요소 의 삽입을 부모의 직접 자식으로 만 감지하고 싶습니다. div.DOM : 새 하위 요소를 찾는 방법은 무엇입니까?

예 :이 모든 요소 삽입뿐 아니라 어린이 트리거 때문에

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

DOMNodeInserted() 이벤트는 저를위한 해결책이 아니다.

등 :

<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

내가 페이지의 실제 JS 코드를 해달라고 당신이 DOM – Raynos

+0

에 주입하기 전에 이벤트를 방출과 같은 더 나은 솔루션 그래서 난 마녀 이벤트를 알고 해달라고하면 당신은 생각할 수 없다 사용됩니다. 단지 무언가를 탐지하기 위해 내 코드를 주입하십시오. –

+3

** 면책 조항 : ** DOMNodeInserted는 더 이상 사용되지 않습니다. – Raynos

답변

3

는 이벤트 핸들러는 다음과 같다 가정 :

처리기 내부
function(evt) { 
    // whatever 
} 

, evt.relatedNode가 삽입이 수행되는 요소로한다. 스위치를 켜고 이벤트를 무시하거나 처리하도록 결정할 수 있습니다.

See it in action.

+0

Jon, 나를 구해 줬습니다. , 고마워요 :) –

+1

@ NidhalRouissi - 그냥 알다시피,이 IE8에서 나를 위해 작동하지 않는 것 같습니다. – jfriend00

+0

괜찮 았어. 이건 구글 크롬 익스텐션 –

0

왜 DOMNodeInserted를 사용하지만, 당신이 그것을 할 때 실제 논리에만 실행되도록 이벤트 핸들러에 체크/IF 문을 추가하지 마십시오?

+0

어떻게 설명 할 수 ? –

+1

DOMNodeInserted는 IE (8 이하 버전)에서 지원되지 않으며 더 이상 사용되지 않습니다. http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted –

7

부모에 DOMNodeInserted을 사용하고 추가 된 요소의 event.target.parentNode을 확인하십시오. idparent이면 요소는 직접적인 자손입니다.

데모 : http://jsfiddle.net/ThinkingStiff/f2w7V/

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

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

}, false); 
+0

에 대한 것이다. 나에게 효과가 없었지만 계속 노력할 것이다. –

+1

@NidhalRouissi 데모 링크가'alert()'를 던지지 않았습니까? – ThinkingStiff

+0

나는 http://jsfiddle.net/KEjke/1을 사용했습니다. –

관련 문제