jquery - 使用 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 事件不会在段落上触发。您需要的是所谓的“突变观察者”。 Here是相关的MDN文档。他们有pretty good浏览器渗透率；对于较旧的 IE，您可能可以使用已弃用的 Mutation Events，尽管众所周知这些事件是性能 killer ，所以要非常小心。我将使用突变观察者重写您的示例；您还可以查看 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});
});