div가 채워지거나 표시 될 때 이벤트 트리거

Question

DIV가 뒤에서 채워지고 두 노드가 내 DIV에 삽입되면 이벤트를 트리거하려고합니다. 나는 이것을 사용하고있다 :

$(function() { 
    var xml = document.querySelector('#XML'); 

    xml.addEventListener("DOMNodeInserted", function (ev) { 
     doSomething(); 
    }, false); 
}); 

이것은 문서가 로딩되거나 다시로드되었을 때 XML div가 채워질 때 작동한다. 어떤 시점에서 사용자가 버튼을 클릭하면 div # XML이 다시로드되지 않고 동적으로 채워지며 DOM 노드가 요소에 삽입 되어도 아무런 변화가 없습니다.

div가 변경 될 때 어떻게 "doSomething()"을 트리거 할 수 있습니까?

Answer 1

코드가 정상적으로 작동합니다. 당신이 Mutation events에서 볼 상대 호환성 HERE 수처럼 :

$(function() { 
 
    $('#XML').on("DOMNodeInserted", function (ev) { 
 
    console.log('DO SOMETHING'); 
 
    }); 
 

 
    $('#btnAdd').on('click', function(e) { 
 
    $('#XML').append($('<p>', {text: 'this is a new paragragh'})); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<div id="XML"></div> 
 

 
<button id="btnAdd">Add a paragragh to div</button>

Answer 2

다음 코드는 당신이 찾고있는 사람이 될 수 있습니다. div 번마다 변경 사항을 찾고 1000 milliseconds, 요구 사항에 따라 변경할 수 있습니다. div에 처음으로 text이있는 경우 그에 따라 oldVal을 업데이트하십시오.

$('#XML').change(function(){ 
    alert("div has changed!"); 
    // replace with your actions 
}); 

var oldVal = ""; 
function InputChangeListener() 
{ 
    if($('#XML').val() != oldVal) 
    { 
    oldVal = $('#XML').val(); 
    $('#XML').change();  
    } 
} 
setInterval(InputChangeListener, 1000);