38

特定の div が作成されたときに関数をオフにしようとしています。簡単に言えば、次のようなものがあります。

<a href="" id="foo">Click me!</a>
<script>
$("#foo").live("click",function(e) {
    e.preventDefault();
    $(this).append($("<div />").html("new div").attr("id","bar"));
});
</script>

以前は、ミューテーション イベントで div#bar の作成をリッスンしていました。次のようなものです。

$("#bar").live("DOMNodeInserted", function(event) {
    console.log("a new div has been appended to the page");
});

Mutation Observers を使用して同等のものはありますか? Can you have a javascript hook trigger after a DOM element's style object changes? に掲載されている attrchange.js を試してみました。ただし、そのプラグインは、要素が作成されたときではなく、要素が変更されたときのみを検出します。

4

3 に答える 3

33

これは、の子リストのミューテーションをリッスンし、ID の子が追加され#fooているかどうかを確認するコードです。bar

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

$("#foo").live("click",function(e) {
    e.preventDefault();
    $(this).append($("<div />").html("new div").attr("id","bar"));
});

// define a new observer
var obs = new MutationObserver(function(mutations, observer) {
    // look through all mutations that just occured
    for(var i=0; i<mutations.length; ++i) {
        // look through all added nodes of this mutation
        for(var j=0; j<mutations[i].addedNodes.length; ++j) {
            // was a child added with ID of 'bar'?
            if(mutations[i].addedNodes[j].id == "bar") {
                console.log("bar was added!");
            }
        }
    }
});

// have the observer observe foo for changes in children
obs.observe($("#foo").get(0), {
  childList: true
});

ただし、これは観測のみ#fooです。#barを他のノードの新しい子として追加したい場合は、 への追加の呼び出しで潜在的な親を観察する必要がありますobs.observe()。の ID を持つノードを観察するには、次のbazようにします。

obs.observe($('#baz').get(0), {
  childList: true,
  subtree: true
});

オプションの追加は、オブザーバーが子またはより深い子孫 (孫など)としてsubtreeの追加を探すことを意味します。#bar

于 2012-11-07T21:17:13.993 に答える
-1

突然変異観察者

// Select the node that will be observed for mutations
const targetNode = document.getElementById('some-id');

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
    // Use traditional 'for loops' for IE 11
    for(const mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();

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

于 2021-01-10T13:02:55.777 に答える