javascript - .on 更改功能第一次起作用而不是第二次起作用？

Question

我有一个购物车，可以根据数量和重量计算成本和运费。因此，有两种可能的运输选项，并且我有一个功能可以在页面加载时自动选择正确的运输。但是，如果用户更改数量，则必须重新运行选择运输的功能。

为此，我尝试了以下代码:

$('.cartInputText').on('change', function() {   
    $('#ShippingOptions option').each(function(){
        if (this.value == '163182') {
            $('#ShippingOptions option[value="163182"]').prop('selected', true)
            return false;
        }
        if (this.value == '163183') {
            $('#ShippingOptions option[value="163183"]').prop('selected', true)
            return false;
        }
    });
});

这是我第一次更改数量时有效的。如果我第二次改变数量就不起作用了。我该如何解决这个问题，以便无论我更改数量多少次它都有效？

更新

onchange 事件第一次触发，但第二次不再触发。为什么？

Answer 1

请使用live而不是on，或者如果jQUery版本高于1.9，请编写如下代码:$(document).on('change','.cartInputText',function() {});

对于您的示例代码，您仅将函数绑定(bind)到 .cartInputText，如果页面重新渲染或任何原因导致 .cartInputText 重新生成，它就会丢失该函数。

对于我的代码，我将函数绑定(bind)到文档，我想你知道 html 元素的事件可以冒泡，你点击 .cartInputText 它会冒泡到文档并让函数被触发。更多请查看 jQuery 中 Live 和 Bind 的区别。