Javascript 在动态插入的文本字符串上激发jQuery

我正在尝试删除一个文本字符串并将其绑定到

单击事件，但我无法找到这个。我想删除我的
em
元素中的所有非数字字符：

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

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

如何将脚本绑定到按钮？我知道我应该以某种方式在

上使用

？到目前为止，我得到的是：

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

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

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

更新

正如以下评论中所建议的那样：-

对此事件要非常小心，因为它很容易导致无限循环
如果您决定在事件处理程序中更改DOM

也许可以试试：-

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

$('em#headercartqty').one("DOMSubtreeModified", updateQuantity);

或

尽管第一次更新调用函数两次，第二次调用函数三次。
您当前的
$（文档）。在（'click'，“.actionbutton”）上，函数（）似乎工作正常，所以我想问题是：它工作得太早。

换句话说，当点击
.action按钮时，会触发两个事件（更新内容的原始事件和您的事件），然后您的事件在另一个事件之前完成工作

因此，您可以尝试使用
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
    });
});

$（文档）.ready（函数（）{
$（文档）.on（'单击'，“.actionbutton”，函数（）{
setTimeout（函数（）{
$（'em#headercartqty'）。文本（函数（xText）{
返回xText.replace（/[^\d]/g'，）；
});
},
100）；//是的，很抱歉-错过了那一个-更新了问题。您对动态更新字符串的代码有控制权吗？（我指的是由
.actionbutton
触发的代码）.No-不幸的是，notMDN说：是的-这使得我的页面冻结对我来说不是一个好的解决方案。谢谢！@abl true，我想在这种情况下，这将触发两次。可能将此与
.one
一起使用，并将文本更改拆分为一个函数，然后重新绑定到
。更改后，将触发一次
。它将多次触发（请参阅）。但是，您可以先检查文本是否需要更改，然后仅在需要更改时调用
replace（）
。这将防止无限循环。@abl我添加了您的建议：）
$('em#headercartqty').bind("DOMSubtreeModified",function(){
    if(/[^\d]/g.test($(this).text())){
       $(this).text(function(_, xText){
          return xText.replace(/[^\d]/g, ''); 
       })
    }
});

$(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, '')); 
    });

})