javascript - 多次下拉选择后更新页面部分

Question

我有一个包含运输选项的选择下拉菜单。我希望在用户更改选项多次选择送货选项后更新目标 ID。目前该选项只会更新一次。

使用 {} 的变量标记来自 ExpressionEngine，但我不确定这种情况是否是 EE 特有的。

代码如下:

HTML:

    <tr>
        <th>
            <span>Shipping:</span>
            <select name="shipping_method" id="shipping_method">
                <option value="">Select shipping method...</option>
                {shipping_method_options}
            </select>
        </th>
        <th id="js-shipping-price">
            {order_shipping}
        </th>
    </tr>

JS:

   $('#shipping_method').change(function() {
        var url = $(this.form).attr('action');
        var data = $(this.form).serialize();
        $.post(url, data, function() {
            $('#js-shipping-price').load('/global/shipping-price');
        });
        return false;
    });

由于我对jQuery不太熟悉，以上代码大部分来自:How to implement AJAX “add to cart” with Expresso Store?

尝试删除 return: false; 因为我不确定在这种情况下是否需要它(但我不确定)，但结果相同。

编辑:

/global/shipping-price 是一个 EE 变量标签，用于返回所选选项的运费:

{exp:store:checkout}{order_shipping}{/exp:store:checkout}

Answer 1

尝试使用事件委托(delegate)来确保使用新数据:

$(document).on('change', '#shipping_method', function() {
    ...
});