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：

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

2 个答案: