javascript - 适用于 HTML 元素文本的 jQuery .change() 方法

Question

这个问题已经有答案了:

Detect element content changes with jQuery (15 个回答)

已关闭 5 年前。

根据jQuery documentation page ，.change()每当 value 时，方法就会调用处理函数相关元素的变化。但该方法仅限于 <input> , <textarea> ，和<select>元素。

我怎样才能对 <p> 做同样的事情？元素(和其他元素)当其 innerHTML变化？如果能找到一个简单的 jQuery 函数来完成此任务，那就太好了。

Answer 1

MutationObserver provides developers with a way to react to changes in a DOM. It is designed as a replacement for Mutation Events defined in the DOM3 Events specification.

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

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

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

// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
    for(var 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
var observer = new MutationObserver(callback);

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

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

这里还有 jQuery 库:https://github.com/joelpurra/jquery-mutation-summary

// Use document to listen to all events on the page (you might want to be more specific)
var $observerSummaryRoot = $(document);

// Simplest callback, just logging to the console
function callback(summaries){
    console.log(summaries);
}

// Connect mutation-summary
$observerSummaryRoot.mutationSummary("connect", callback, [{ all: true }]);