使用 JQuery 检测段落元素变化答案

【问题标题】：Detect paragraph element change with JQuery使用 JQuery 检测段落元素变化
【发布时间】：2015-02-16 21:52:08
【问题描述】：

在JQuery中是否可以检测出段落的内容是否发生了变化？

我尝试了下面的代码。

<p id="test">Text</p>
<button id="submit1">change</button>

-

$(document).on("click", "#submit1", function () {
    var d = new Date();
    var time = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
    $("#test").text(time);
});       
$(document).on("change", "#test", function () {
    alert("Paragraph changed");
});

JSFiddle : http://jsfiddle.net/nnbqye55/

我想我遗漏了一些明显的东西。

【问题讨论】：

标签： jquery onchange paragraph

【解决方案1】：

change 事件不会在该段落上触发。您需要的是Mutation Observers。 Here 是相关的 MDN 文档。他们有pretty good浏览器渗透；对于较旧的 IE，您可能可以使用已弃用的 Mutation Events，尽管众所周知这些是性能杀手，所以要非常小心。我将使用 Mutation Observers 重写您的示例；您也可以查看 jsFiddle demo：

$(function(){
    //Store the test paragraph node
    var test = $('#test');

    //Function to change the paragraph
    var changeParagraph = function () {
        var d = new Date();
        var time = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
        test.text(time);
    };

    //Bind the paragraph changing event
    $('#submit1').on('click', changeParagraph);

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

【讨论】：

你知道为什么MutationObserver中有2个MutationRecord（突变）吗？
因为发生了两个突变。首先，子节点列表发生了变化（一个text 节点被另一个替换）。其次，观察到的 DOM 元素中包含的data 发生了变化（在你的开发工具中观察test.get(0).data 的值，看看我的意思）。您只能通过执行this.observer.observe(test.get(0),{childList: true}) 来观察childList 的更改，但是如果text 节点本身的数据发生更改而不替换该节点，则不会触发观察者。最好注意两种可能的突变，然后遍历它们以找到你想要的。

【解决方案2】：

您可以使用 'DOMSubtreeModified' 来检查 html 标签元素上的 dom 更改。请参阅跨浏览器对此 event 的支持。

http://jsfiddle.net/nnbqye55/7/

$(document).on("DOMSubtreeModified", "#test", function () {
    alert("Paragraph changed");
});

【讨论】：

【解决方案3】：

您可以仅将change() 事件附加到<input>, <select> 和<textarea> 元素并检测它们的值变化。不在其他元素上。检查here

【讨论】：

【解决方案4】：

在更改时，您必须触发如下更改事件

$(document).on("click", "#submit1", function () {
    var d = new Date();
    var time = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
    $("#test").text(time).trigger("change");
});     

$(document).on("change", "#test", function () {
    alert("Paragraph changed");
});

JS Fiddle

【讨论】：

也许我在查询中很清楚 - 我想检查段落的更改.. 更改可能是由于其他地方的任何事件...您的解决方案假定更改是通过按钮单击完成的仅限。
我的回答是帮你？

【解决方案5】：

您可以使用此处的代码http://quiiver.appspot.com/method_observer_for_jquery 并像使用它

$('#test').bind('text' // the method's name used to change the text
, function(){
    alert("Paragraph changed");
})

DEMO 但是，它只适用于通过 jQuery 进行的修改。

【讨论】：

【解决方案6】：

您不一定需要 JQuery，在现代浏览器中，Web API 包括 mutation observers。对于旧版浏览器，有mutation events。

变异观察者示例：

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    alert(mutation.type);
  });    
});

摆弄变异观察者：http://jsfiddle.net/nnbqye55/5/

有关 JQuery/旧版 IE 支持，请参阅：https://github.com/kapetan/jquery-observe

【讨论】：

【解决方案7】：

批准的答案对我不起作用，所以这是我修改后的工作示例，供任何人参考。

function getNode(){
//Store the test paragraph node
var test = $('#test');

if(!test){
  // The node we need may not exist yet
  // Wait 500ms and try again
window.setTimeout(getNode, 500);
return;
}
//Function to change the paragraph
var changeParagraph = function () {
    var d = new Date();
    var time = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
    test.text(time);
};

//Bind the paragraph changing event
$('#submit1').on('click', changeParagraph);

//Observe the paragraph
this.observer = new MutationObserver(changeParagraph);
this.observer.observe(test, {characterData: true, childList: true});
});
//Delay calling our function until page loads
setTimeout(function() {
    getNode();
}, 5000);

【讨论】：