使用JQuery检测段落元素更改

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事件不会触发该段落.你需要什么称为变异观察者. 这是相关的MDN文档.他们有很好的浏览器渗透率; 对于较旧的IE,您可以使用已弃用的Mutation Events,尽管这些都是性能杀手,所以要非常小心.我将使用Mutation Observers重写你的例子; 你也可以查看一个jsFiddle演示:

$(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});
});