如何检测span元素的内容何时更改

Question

可以说我的span如下所示： <span id='myId'>content before change</span>

我需要一个类似的活动

$('#myId').contentChanged(function(){
   alert( 'New content: ' + $(this).text() )
})

所以当我如下更改跨度的内容时

$('#myId').text('content after change')

上面的contentChanged事件触发。 这应该是相当有效的性能明智的选择，因为在我的情况下，可能要监视数百个。

Answer 1

您可以这样尝试：

$(document).ready( function() {
     $('#myId').bind( "contentchange", function(){
          alert("Changed");
    });

    $( "#btn" ).click( function () {
        $('#myId').html( "Value" ).trigger( "contentchange" );
    });
});

JSFIDDLE演示

Answer 2

您可以创建一个间隔来检查更改：

function monitorElementText(selector) {
    var $el = $(selector);
    $el.data("elementText", $el.text());

    setInterval(function() {
        if ($el.data("elementText") != $el.text()) {
            $el.trigger("change");
            $el.data("elementText", $el.text());
        }
    }, 50);

    return $el;
}

并这样实现：

monitorElementText("#span1").on("change", function() {
    alert( 'New content: ' + $(this).text() );
});

大量运行这些可能不是很好。 但是，如果您仅监视一些元素，那么它可能对您有用。

Answer 3

MutationObserver允许您监视DOM节点。 实际代码将取决于您的具体情况，请参阅https://developer.mozilla.org/en/docs/Web/API/MutationObserver 。 请记住，对于较旧的浏览器，您将不得不使用不推荐使用的MutationEvent来实现它，但是从性能POV来看，它们比计时器要好。