ノードがDOMに追加されたときに反応するjQueryイベント（またはハック）

Question

要素がDOMに追加されたときにイベントがトリガーされるようにしたいと思います。これについて直感的に考えることができます：

//pick the generic selector of your choice. 
//The naive idea is to execute this handler when an element satisfying 
// this selector is added to the DOM. 
$('my-tag.my-class:my-pseudo-selector').ready(function() { 
    // do initialization for element 
}); 

これは機能しません。これはどちらでもありません。

$(document).on('ready', 'my-tag.my-selector:my-pseudo-selector', function() { 
    // do initialization for every element added to the dom, now and in the future 
}); 

.ready is only intended to work with document以降です。

エレメントを後でDOMに追加するときに、どのように動作させるか、またはハッキングをトリガーするにはどうすればよいですか？この追加は、次の3つの方法のいずれかで非同期javascriptによって実行されます。

• Ajax .js responses。
• ajaxレスポンスのJSハンドラ。
• .html('<my-tag class="my-class" />')のようなコール、またはinsertBefore、insertAfter、appendTo、append、などと呼ばれるコールがあります。

Answer 1

ここhttps://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

は一例で試してみてください。

var whatToObserve = {childList: true, attributes: true, subtree: true, attributeOldValue: true, attributeFilter: ['class', 'style']}; 
var mutationObserver = new MutationObserver(function(mutationRecords) { 
    $.each(mutationRecords, function(index, mutationRecord) { 
    if (mutationRecord.type === 'childList') { 
     if (mutationRecord.addedNodes.length > 0) { 
     //DOM node added, do something 
     } 
     else if (mutationRecord.removedNodes.length > 0) { 
     //DOM node removed, do something 
     } 
    } 
    else if (mutationRecord.type === 'attributes') { 
     if (mutationRecord.attributeName === 'class') { 
     //class changed, do something 
     } 
    } 
    }); 
}); 
mutationObserver.observe(document.body, whatToObserve); 

Answer 2

あなたはDOMSubtreeModifiedを使用することができます。

$(document).bind('DOMSubtreeModified', function() { 
 
    console.log('document change'); 
 
}); 
 

 
$('input[type=button]').on('click', function() { 
 
    $('body').append("<div>append element via button click</div>"); 
 
}); 
 

 
$('body').append("<div>append element</div>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type='button' value='click' />