jQuery，顯示下一次點擊的功能結果

Question

我試圖在magento 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