divが入力/表示されたときにイベントをトリガーする

Question

DIVが背面から取り込まれた後にイベントをトリガーしたい場合は、2つのノードが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

次のコードは、あなたが探して1かもしれません。 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);