如何将处理程序附加到<span>

How can I attach a handler to an innerHTML change inside a <span>?

本文关键字：lt span gt 处理 程序      更新时间：2023-09-26

如何检测<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();
            });

您可以尝试：

执行一次：

  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
 });

您可以绑定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>

这里有一个很好的发现：

相关文章：