1

サードパーティ ソフトウェアによって生成された Web ページがあります。生成されたコンテンツをほとんど制御できませんが、この Web ページに JavaScript を挿入することはできます。このWebページにはボタンがあり、クリックしてからしばらくすると（データはこのサードパーティソフトウェアから動的に要求され、この時間は要求によって大きく異なります）、テーブルが生成されます。このテーブルは、私が知っている ID で以前は空だった DIV で生成されます。このテーブルは、他のコントロール (並べ替え、フィルター処理、ページごとに表示される要素の量の変更など) を使用して操作できます。これは DataTables (datatables.net) オブジェクトです。この動的に作成されたテーブルを ID で検索し、その内容の書式設定を変更する関数を作成しました。

ここでの問題は、このテーブルが生成されたとき、またはその内容が変更されたときにこの関数が実行されるようにイベント ハンドラーを設定する方法です。ページが初めてロードされるとき、DIV は空であり、DOM にそのような ID を持つテーブルはありません。もう1つの問題は、このすべてのフィルタリングなどがどのように機能するかがわからないことです。そのため、テーブルで何かが変更されるたびに、すべての変更が完了した後に関数を実行する必要があります (他のすべての関数が動作を終了しました)。

ありがとう！

4

1 に答える 1

0

イベントを利用できますDOMSubtreeModified

$(document).ready(function() {
    $("body").on("DOMSubtreeModified", function() {
        if ($("#dynamicallyCreatedTableID").length>0) {
            //add your event handlers for #dynamicallyCreatedTableID here
        }
    });
});

$(document).ready()-eventのカプセル化に注意してください。これにより、DOM 自体が最初に構築されたときではなく、ボタンがクリックされて DOM が更新されたときにのみイベントが発生することが保証されます。

はい - 私が DOMSubtreeModified テストしたブラウザではまだ動作しますが、非推奨であることはわかっています。

代わりに、 を使用して同じことを実現できますDOM MutationObserver。このブログの変更例を次に示します。

$(document).ready(function() {
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
    var body = document.querySelector('body');
    var observer = new MutationObserver(function(mutations) {  
        mutations.forEach(function(mutation) {
            if ($("#dynamicallyCreatedTableID").length>0) {
                //add your event handlers for #dynamicallyCreatedTableID here
            }
        });
    });
    observer.observe(body, {
        attributes: false, 
        childList: true, 
        characterData: false 
    });
});

DOMSubtreeModified上記は最初の例とまったく同じです

于 2013-11-06T15:30:41.800 に答える