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 DEMO

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优于计时器。

如何检测span元素的内容何时发生变化

3 个答案: