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 
    } 
}