javascript - 使用 AJAX 调用函数

Question

我不确定如何完整地解释这一点，但我希望这是有道理的。

我创建了一个函数，用于计算当购物篮总值(value)落在特定阈值内时需要花费的剩余金额才能获得免费送货资格。

每次将产品添加到购物篮时，购物篮值(value)都会通过 AJAX 进行更新。

“添加到购物篮”按钮出现在 AJAX 生成的模式中。

我需要在每次页面刷新时以及每次单击 AJAX 生成的“添加到购物篮”按钮时将产品添加到购物篮时调用我的函数。我正在尝试用下面的方法完成所有这些操作，但它似乎无法正常工作。其中一个问题是，当单击“添加到购物篮”按钮时，该事件会多次触发，另一个问题是购物篮总计在事件发生后更新，因此总计计算不正确。

谁能解释一下我该如何整理这一切？

function totalBag() {
   var standardDeliveryLow = 49.99;
   var standardDeliveryHigh = 64.99;
   var expressDeliveryLow = 65.00;
   var expressDeliveryHigh = 99.99;
   var bagValue = $('#basket-value').text();
   var bagTotal = Number(bagValue.replace(/[^0-9\.-]+/g,""));

   if (bagTotal >= standardDeliveryLow && bagTotal <= standardDeliveryHigh) {
       var standardDifference = parseFloat(Math.round((standardDeliveryHigh - bagTotal) * 100) / 100).toFixed(2);
       $('<div class="delivery-message"><p>£'+ standardDifference +' from standar delivery</p></div>').insertAfter('.breadcrumbs');
   } else if (bagTotal >= expressDeliveryLow && bagTotal <= expressDeliveryHigh) {
      var expressDifference = parseFloat(Math.round((expressDeliveryHigh - bagTotal) * 100) / 100).toFixed(2); 
      $('<div class="delivery-message"><p>£'+ expressDifference + ' from express delivery</p></div>').insertAfter('.breadcrumbs');
   } else {
     return false;
   }
}

$(document).on('ajaxSuccess', function(e) { 
  $('[name="AddItemToBasket"]').on('click', function() {
    $('body').bind('ajaxSuccess.custom', function() {
     totalBag();
     //alert('this works');
     $(this).unbind('ajaxSuccess');
  });
 });
});


totalBag();

Answer 1

编辑:已修复文本重复的问题。还添加了评论以供更多理解。

<小时/>

检查了您指定的链接并尝试了以下修改后的代码。

根据@ADyson，已删除点击事件，这修复了多个事件触发。

关于您的其他问题，总数在事件发生后更新，是的，HTML 在 ajaxSuccess 被触发后更新。因此，使用 ajaxSuccess 事件本身来获取购物篮金额并在totalBag fn 中使用它。

它似乎正在发挥作用。请确认:

//Adding empty div so that we can just update the value later
$(document).on('ready', function(){
    $('<div class="delivery-message"></div>').insertAfter('.breadcrumbs');
})

function totalBag(bagTotal) {
   var standardDeliveryLow = 49.99;
   var standardDeliveryHigh = 64.99;
   var expressDeliveryLow = 65.00;
   var expressDeliveryHigh = 99.99;
   //var bagValue = $('#basket-value').text();
   //var bagTotal = Number(bagValue.replace(/[^0-9\.-]+/g,""));

   //Using a variable to store the calculated amount with text
   var innerHTML = "";
   if (bagTotal >= standardDeliveryLow && bagTotal <= standardDeliveryHigh) {
       var standardDifference = parseFloat(Math.round((standardDeliveryHigh - bagTotal) * 100) / 100).toFixed(2);
       innerHTML= "<p>£"+ standardDifference +" from standar delivery</p>";
   } else if (bagTotal >= expressDeliveryLow && bagTotal <= expressDeliveryHigh) {
      var expressDifference = parseFloat(Math.round((expressDeliveryHigh - bagTotal) * 100) / 100).toFixed(2); 
      innerHTML= "<p>£"+ expressDifference +" from express delivery</p>";
   } else {
     return false;
   }
   //Updating the placeholder with new contents
   $(".delivery-message").html(innerHTML);
}

//Gets triggered after every Ajax Success.
//e -> event object, xhr -> The Ajax object which has request and response details, 
//settings -> The settings we used to trigger Ajax, including the request URL
$(document).on('ajaxSuccess', function(e, xhr, settings) { 
    //Checking if the request is of Adding Item to Basket
    if(settings.url.indexOf("AddItemToBasket") !== -1){
        //Getting the response and parsing it
        var resp = xhr.responseText;
        var respObj = JSON.parse(resp);
        //Checking if response is success i.e., item added to cart successfully
        if(respObj.success){
            //Getting the updated Basket value and calling totalBag
            var bagTotal = respObj.basket.subTotal;
            totalBag(bagTotal); 
        }       
    }

});
totalBag(0);