jQuery, результат отображения функции при следующем нажатии

Question

Я пытаюсь сделать расчет авто цены на пурпурный продукт 2.1. Когда я проверяю свой код на фрагмент или jsfiddle, он работает нормально, но когда он запускается на реальном magento-сайте, результат вычисления функции mouseup будет отображаться на следующем клике (или с предыдущего щелчка), но на «keyup» отлично работает. У кого-нибудь есть ответы на это дело?

$(document).ready(function(){ 
 
    $(".control").on("keyup mouseup",function(){ 
 
     var totale = 0; 
 
     $(".quantity-number .qty").each(function() { 
 
      var qty = parseFloat($(this).val()); 
 
      //var price = parseFloat($(".price-wrapper").attr("data-price-amount")); 
 
      //var price = parseFloat($(".price").attr("data-price-amount")); 
 
      //var price = parseFloat($(".price").text()); 
 
      
 
      var price = parseFloat($('.product-info-main span.price').text().match(/\d+/)[0], 10); 
 
      
 
      /* 
 
      var temp=$(".price").text(); 
 
      var num = temp.match(/[\d\.]+/g); 
 
      if (num != null){ 
 
       var price = num.toString(); 
 
      } 
 
      */ 
 
      totale += qty * price; 
 
      totale = qty * price; 
 
     }); 
 
     $(".cal-price").html("฿"+totale.toFixed(2)); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
    <div class="product-info-main"> 
 
    <span class="price-wrapper" data-price-amount="10"> 
 
    <span class="price"> 
 
    ฿10.00 
 
    </span> 
 
    <div class="control"> 
 
     <div class="quantity-number"> 
 
      <input type="number" name="qty" id="qty" maxlength="12" value="1" title="Quantity" class="input-text qty"> 
 
    </div> 
 
    <span class="cal-price"></span> 
 
    </div>

https://jsfiddle.net/l2esforu/x6332ay3/

Answer 1

Моя проблема РЕШИТЬ! спасибо

После попытки использовать каждое состояние может произойти на главном div.

$(document).on("input keyup change click mouseup",".control",function(){ 
    $(".quantity-number .qty").each(function() { 
     //do stuff 
    }); 
} 

Answer 2

Если вы желаете, чтобы вызвать функцию, когда значение изменяется во входном элементе, добавить прослушиватель событий для «ввода» событие на самом входе элемента.

$("#qty").on("input", function() { ... });

Однако, если у вас есть несколько входов, количества, и они добавляются динамически, вы будете использовать селектор делегата следующим образом:

$(".control").on("input", ".qty", function() { 
    // do stuff 
}); 

Event Delegation Docs