jQuery，下次点击显示函数结果

Question

我正在尝试对 magento 2.1 产品进行自动价格计算。当我在 snippet 或 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

如果您想在输入元素中的值更改时调用该函数，请为输入元素本身的 "input" 事件添加一个事件侦听器。

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

但是，如果您有多个数量输入，并且它们是动态添加的，您将需要像这样使用委托选择器：

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

Event Delegation Docs

Answer 2

我的问题已经解决了！谢谢

尝试使用每个状态后可能会在主 div 上发生。

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

jQuery，下次点击显示函数结果

jQuery, display result of function on next click

javascript

jquery

magento

magento2