Question

是否可以检测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/

我想我错过了一些明显的东西。

Answer 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});
});

Answer 2

您只能将change()事件附加到<input>, <select>和<textarea>元素并检测其值更改。不在其他元素上。查看here

Answer 3

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

$(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

Answer 4

您可以使用此处的代码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进行的修改。

Answer 5

您不一定需要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

Answer 6

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

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

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

Answer 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);

使用JQuery检测段落元素更改

7 个答案: