如何将处理程序附加到 <span> 内的 innerHTML 更改？

Question

如何检测<span> 元素内部的更改我需要将处理程序附加到它但无法成功。

这是我的html：

<span class="pad-truck-number-position"><?php echo $_SESSION['truckId']; ?></span>

这是我的 javascript/jQuery:

<script type="text/javascript">
    var changedText = $('.pad-truck-number-position').text();
    alert(changedText);
    $(changedText).on('change',function() {
        alert("changed");   
    });
</script>

alert(changedText) 工作正常。但是当跨度内的文本发生变化时，它不会提醒alert("changed");

这就是我更改元素的方式：

          truckTable.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
        var nTds = $('td', this);
            var index = $(nTds[0]).text();
            $.ajax({
                type: "POST",
                url : "content/right-up/trucks.php/",
                data: { truckid : index },
                headers : {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}
            }).done(function(response){
                $('.pad-truck-number').text(index);
                $('.pad-truck-number-position').text(index);
                $('#mapContent').load("content/left-up.php");
                $('#right-down-tab-truck').tabs('load', 0);
                $('#right-down-tab').hide();
            $('#right-down-tab-truck').show();
            });

Answer 1

你可以试试：

执行一次：

  jQuery('.pad-truck-number-position').one("DOMSubtreeModified",function(){   
         //Notice the .one not .on
         //Your code
 });

或多次：

 jQuery('.pad-truck-number-position').on("DOMSubtreeModified",function(){   

         //Your code
 });

Answer 2

你可以绑定DOMSubtreeModified来检查里面的文字是否被修改：

<script type="text/javascript">
var changedText = $('.pad-truck-number-position').text();
alert(changedText);
$('.pad-truck-number-position').bind('DOMSubtreeModified', function(event) {
    alert('changed');
});
</script>

或者使用突变观察者：

<script type="text/javascript">
var changedText = $('.pad-truck-number-position').text();
var element = $('.pad-truck-number-position')[0];
// var original_text = element.text();

var observer = new MutationObserver(function( mutations ) {
    mutations.forEach(function( mutation ) {
        var newNodes = mutation.addedNodes;
        if( newNodes !== null ) {
            alert('changed');
        }
    });
});

var config = { attributes: true, childList: true, characterData: true };
observer.observe(element, config);
</script>

这是一个很好的find：