当我的购物车输入字段更新时，jquery .change() 不起作用答案

【问题标题】：jquery .change() not working when my cart input fields are update当我的购物车输入字段更新时，jquery .change() 不起作用
【发布时间】：2015-07-10 17:47:39
【问题描述】：

如果添加或减少产品，我有一个小脚本应该更新我页面上的购物车计数。当我添加购物车项目并且提交的数量发生更改时，这似乎不起作用，但如果我刷新页面，它会起作用：

(function($){
    jQuery(".hikashop_cart_module input.hikashop_product_quantity_field").change(function(){
        var sum = 0;
        $(".hikashop_cart_module input.hikashop_product_quantity_field").each(function(){
            sum += +$(this).val();
        }).change();
        $("#total").text(sum);  
    });
})(jQuery);

【问题讨论】：

change 在您离开输入字段时触发。此外，您将.change()（触发器）添加到.each，而不是事件处理程序。这是需要发生的事情吗？

标签： jquery

【解决方案1】：

您的代码中有一些错误。与此比较：

(function($){
    // if you load your elements dynamically you need to use delegated events
    $(document).on('change', '.hikashop_cart_module input.hikashop_product_quantity_field', function(){
        var sum = 0;
        $(this).each(function(){
            sum += +$(this).val();
        });
        $("#total").text(sum);
    });
})(jQuery);

【讨论】：

我认为问题是当用户退出输入字段时会触发 change()，在我的情况下，用户只是使用添加到购物车按钮并且购物车输入字段由嵌入在购物车组件中的 ajax 脚本。有关如何处理此问题的任何建议？
那你需要使用委托事件，检查this article。我更新了我的答案。

【解决方案2】：

您在选择器中犯了一个错误。你应该使用这个：

(function($){
    jQuery(".hikashop_cart_module.input.hikashop_product_quantity_field").change(function(){
        var sum = 0;
        $(".hikashop_cart_module.input.hikashop_product_quantity_field").each(function(){
            sum += +$(this).val();
        })
        $("#total").text(sum);  
    });
})(jQuery);

在.change() 事件处理程序之后的each 循环也存在问题。它正在创建触发事件的无限循环。我已经创建了一个fiddle，这样你就可以看到正在运行的工作版本！

【讨论】：