.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(){});

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

对于我的代码，我将函数绑定到文档，并且我想您知道html元素的事件可能会冒泡，单击.cartInputText并冒泡到文档，然后触发函数。 更多信息，请检查jQuery中Live和Bind的区别。

Answer 2

使用用户KeyUp功能代替change来检测输入文本。

喜欢：

$('.cartInputText').keyup(function () {
    alert('test');
});

这是.keyup（）的官方jQuery文档。

DEMO

Answer 3

上面的代码适用于在执行前面的语句之前添加的html代码，

如果动态添加了其他具有相同类（cartInputText）的其他内容，则需要在添加内容后再次调用它来分配上述功能。