jQuery代码不更新网页

Question

我确定我在这里忽略了一些东西...我有一些 jQuery 代码，当按下表单按钮时会触发。按下按钮，查看优惠券代码并将其写入表单上的 div 中，然后应用折扣（总计 = 价格 - 折扣）。问题是，当我通过 Firebug 调试它时，大约 80% 的时间代码都能正常工作。但是，当我运行代码时，它不起作用。就像代码运行得太快，变量无法获得正确的信息。代码如下：

$('#coupon-submit').click(function() {
    applyCoupon($('#coupon'), $(this));

    var price = $('#price-total').text();
    price = price.substring(5,price.length);

    var theText = $('#fulldiscounttext').text();  // Sometimes this has a value while debugging, sometimes not
    var discount = theText.substring(1, theText.length-4); // Takes unwanted characters out of string

    var total = price - discount;

    $('#price-total').text('US $ ' + total.toFixed(2));
    var thetotal = $('#price-total').text();
    $('#grandtotal').val(thetotal);
});

applyCoupon() 查找代码并将其写入 div #fulldiscounttext。我正在尝试使用折扣金额更新#price-total div。它没有更新（除非我正在调试它）。

applyCoupon() 函数：

function applyCoupon(couponInput, couponButton)
{
    removeInputNames();
    $.ajax({
        data: $('#orderform').serialize(),
        type: 'POST',
        timeout: 5000,
        url: 'coupon.php',
        dataType: 'text',

        beforeSend: function(request)
        {
            $('#coupon-error').text('');
            couponButton.attr('disabled', 'disabled');

        },
        success: function(data, textStatus)
        {
            couponButton.removeAttr('disabled');

            if(data == "bad error code")
                couponOK = 0;
            else
                couponOK = 1;

            if (!couponOK)
            {
                var badcode = couponInput.val().toString();
                if (badcode.length > 0)
                {
                    var fmt = 'You\'ve entered an invalid code.';
                    $('#coupon-error').text(fmt);
                }
            }
            else    // Coupon recognized!
            {
                $('#total-row').before('<tr><td colspan="4">'
                    + '<div id="fulldiscounttext">' + data
                    + ' Off</div>'
                    + '</td></tr>');

                // New discount information; save and update totals
                $('#discount-storage').text(data);
                showPrice();
            }
        }
    });
}

Answer 1

由于applyCoupon 是一个异步函数，因此您的其余代码将在请求处理时继续运行。调用完成后使用回调运行代码：

applyCoupon($('#coupon'), $(this), function() {
    var price = $('#price-total').text();
    price = price.substring(5,price.length);

    var theText = $('#fulldiscounttext').text();  // Sometimes this has a value while debugging, sometimes not
    var discount = theText.substring(1, theText.length-4); // Takes unwanted characters out of string

    var total = price - discount;

    $('#price-total').text('US $ ' + total.toFixed(2));
    var thetotal = $('#price-total').text();
    $('#grandtotal').val(thetotal);
});

还有applyCoupon 函数：

function applyCoupon(couponInput, couponButton, callback) {
    //AJAXy stuff
    success: function(data, textStatus)
    {
        couponButton.removeAttr('disabled');

        if(data == "bad error code")
            couponOK = 0;
        else
            couponOK = 1;

        if (!couponOK)
        {
            var badcode = couponInput.val().toString();
            if (badcode.length > 0)
            {
                var fmt = 'You\'ve entered an invalid code.';
                $('#coupon-error').text(fmt);
            }
        }
        else    // Coupon recognized!
        {
            $('#total-row').before('<tr><td colspan="4">'
                + '<div id="fulldiscounttext">' + data
                + ' Off</div>'
                + '</td></tr>');

            // New discount information; save and update totals
            $('#discount-storage').text(data);
            showPrice();
        }
        callback(); //ADDED CALLBACK TO RUN ONCE THE AJAX REQUEST IS COMPLETE
    }
}