对动态插入的文本字符串启动jQuery

Fire jQuery on dynamically inserted textstring

本文关键字：字符串 启动 jQuery 文本 动态 插入      更新时间：2023-09-26

我试图删除一个文本字符串并将其绑定到click事件，但我无法解决这个问题。我想删除em元素中的所有非数字字符：

<div class="cart">
    <dl>
        <dt>
            <span class="cartspan">
                <em class="minicart"></em>
                <em id="headercartqty">8 items</em>
            </span>
        </dt>
    </dl>
</div>

我使用这个脚本在页面加载时删除它：

$('em#headercartqty').text(function(_,xText){
    return xText.replace(/[^'d]/g, ''); 
})

我的问题是，当我用类.actionbutton点击一个按钮时，它会动态更新字符串，然后再次显示单词items。

如何将脚本绑定到按钮？我知道我应该以某种方式使用.on？这就是我目前所掌握的：

$(document).ready(function () {
    $(document).on('click', ".actionbutton", function () {        
        $('em#headercartqty').text(function(_, xText){
            return xText.replace(/[^'d]/g, ''); 
        })
    });
});

DOMSubtreeModified将检测到内容的更改，然后您可以进行更改：-

$('em#headercartqty').bind("DOMSubtreeModified",function(){
  $(this).text(function(_, xText){
      return xText.replace(/[^'d]/g, ''); 
   })
});

更新

正如@abl在以下评论中建议的那样：-

小心处理此事件很容易导致无限循环如果您决定更改事件处理程序中的DOM。

也许可以试试：-

function updateQuantity(){
   $(this).text(function(_, xText){
      return xText.replace(/[^'d]/g, ''); 
   })
   $('em#headercartqty').one("DOMSubtreeModified", updateQuantity);
}
$('em#headercartqty').one("DOMSubtreeModified", updateQuantity);

或

$('em#headercartqty').bind("DOMSubtreeModified",function(){
    if(/[^'d]/g.test($(this).text())){
       $(this).text(function(_, xText){
          return xText.replace(/[^'d]/g, ''); 
       })
    }
});

尽管第一次更新调用该函数两次，而第二次调用它三次。

您当前的$(document).on('click', ".actionbutton", function ()似乎工作正常，所以我想问题是：工作太早
换句话说，当单击.actionbutton时，两个事件（更新内容的原始事件和您的事件）将被触发，然后您的事件在另一个事件之前完成工作。

因此，您可以尝试使用setTimeout来创建自己的事件以延迟其工作，如下所示：

$(document).ready(function () {
    $(document).on('click', ".actionbutton", function () {
        setTimeout(function() {     
            $('em#headercartqty').text(function(_, xText){
                return xText.replace(/[^'d]/g, ''); 
            });
        },
        100); // <-- make different tries to adjust delay to the minimum
    });
});

$(function(){
    $('.actionbutton').on('click',function(e){
        e.preventDefault();
        var el= $('em#headercartqty');
        el.text(el.text().replace(/[^'d]/g, '')); 
    });
})
相关文章：