Question

我写了一个小脚本来识别段落中的更改。我不知道为什么MutationObserver没有识别出这些变化。我希望在对文本进行一些更改时显示警报。

$(function(){
    //Store the test paragraph node
    var test = $('#test');
    
    //Observe the paragraph
    this.observer = new MutationObserver( function(mutations) {
        alert('Paragraph changed!')
    }.bind(this));
    this.observer.observe(test.get(0), {characterData: true, childList: true});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div contenteditable="true" id="editor">
<p id="test">
Edit the text! 
</p>
</div>

非常感谢任何帮助或建议，非常感谢您提前！

Answer 1

您需要在配置中添加subtree: true（以下示例）。这是因为正在更改的字符数据不是p元素，而是 p元素中的文本节点。

如果您正在观察test.get(0).firstChild（p元素的初始子文本节点），那么您将收到没有subtree标志的通知 - 但当然，您不会'例如，从em中的p元素获取通知。因此，添加subtree可能是您最好的选择。

已更正示例：

$(function(){ //Store the test paragraph node var test = $('#test'); //Observe the paragraph this.observer = new MutationObserver( function(mutations) { alert('Paragraph changed!') }.bind(this)); this.observer.observe(test.get(0), { characterData: true, childList: true, subtree: true // <===== Change is here }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div contenteditable="true" id="editor"> <p id="test"> Edit the text! </p> </div>

MutationObsrver无法识别更改

1 个答案: