Fire jQuery на динамически вставленной текстовой строке

Question

Я пытаюсь удалить текстовую строку и связать ее с событием 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 динамически обновляет строку, а затем снова отображает слова.

Как связать скрипт с кнопкой? Я понимаю, я должен как-то использовать .on? Это то, что я получил до сих пор:

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

Answer 1

DOMSubtreeModified обнаружит изменение содержания, которое вы можете сделать ваши изменения: -

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

UPDATE

Как @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, ''); 
     }) 
    } 
}); 

Хотя первое обновление вызывает функцию дважды, когда второй называет это 3 раза.

Answer 2

Ваш текущий $(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 
    }); 
}); 

Answer 3

$(function(){ 

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

})