Javascript 用AJAX调用函数

我不知道如何完全解释这一点，但我希望这会有意义

我做了一个函数，当篮子价值总额在某个阈值范围内时，该函数计算出符合免费交付条件的剩余支出金额

每次向篮子中添加产品时，篮子值都会使用AJAX进行更新

addtobasket按钮出现在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();

函数totalBag（）{
var standardDeliveryLow=49.99；
var standardDeliveryHigh=64.99；
var expressDeliveryLow=65.00；
var expressDeliveryHigh=99.99；
var bagValue=$（“#篮值”）.text（）；
var bagTotal=编号（bagValue.replace（/[^0-9\.-]+/g，”）；
如果（bagTotal>=standardDeliveryLow&&bagTotal=expressDeliveryLow&&bagTotal编辑：修复了文本重复的问题。还添加了注释以便于进一步理解


在指定的链接上进行了检查，并尝试了以下修改的代码

根据@ADyson，我们已经删除了click事件，它正在修复多事件触发

关于您的另一个问题，总计在事件后更新，是的，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);

//添加空div以便我们以后可以更新该值
$（文档）.on（'ready'，function（）{
$（''）.insertAfter（'.breadcrumbs'）；
})
功能totalBag（bagTotal）{
var standardDeliveryLow=49.99；
var standardDeliveryHigh=64.99；
var expressDeliveryLow=65.00；
var expressDeliveryHigh=99.99；
//var bagValue=$（“#篮值”）.text（）；
//var bagTotal=编号（bagValue.replace（/[^0-9\.-]+/g，”）；
//使用变量以文本形式存储计算的金额
var innerHTML=“”；
如果（bagTotal>=standardDeliveryLow&&bagTotal=expressDeliveryLow&&bagTotal事件对象，xhr->具有请求和响应详细信息的Ajax对象，
//设置->我们用来触发Ajax的设置，包括请求URL
$（文档）.on（'ajaxSuccess'，函数（e，xhr，settings）{
//检查请求是否为将项目添加到购物篮
if（settings.url.indexOf（“AddItemToBasket”）！=-1）{
//获取响应并对其进行解析
var resp=xhr.responseText；
var respObj=JSON.parse（resp）；
//检查响应是否成功，即项目是否成功添加到购物车
如果（响应成功）{
//获取更新的篮子值并调用totalBag
var bagTotal=respObj.basket.subTotal；
totalBag（bagTotal）；
}       
}
});
总袋（0）；
“其中一个问题是，当单击“添加到篮子”按钮时，事件会多次触发”。这是因为，
$（文档）。在（'click'，函数（e）{
表示每次有人单击页面上的任何位置时，都会添加另一个“click”通过再次运行该代码，将事件处理程序添加到AddItemToBasket元素。因此，如果不小心，您可能会有几十个处理程序。在元素上设置事件处理程序不会删除以前定义的处理程序，它只会继续添加更多处理程序。您是指
$（document）.ready（function（）{
（即，在加载DOM时运行此代码一次）？而且.bind（）在几年前的jQuery 1.7中被.on（）取代（您在其他地方使用过），在3.0中被弃用。实际上，没有很好的理由使用它。它位于一个文档就绪函数中，尽管我没有包含它，但对于混淆表示歉意。在这种情况下，您可以删除
$（文档）.on（'click'，函数（e）{
我想完全是这样。单击add按钮，是否有Ajax调用？或者唯一的Ajax调用是显示模式？此解决方案工作得非常好。非常感谢！我看到ajaxSuccess回调是这样工作的，但我无法理解它或如何将其应用到我的站点。如果您能解释，我将非常感谢。再次感谢！Alth尽管如此，它在每次添加项时都会执行该事件，这意味着每次都会将jquery插入DOM。有没有办法让它在每次被激发时只更新相同的总数？是的。这应该是可能的。在文档准备就绪时，添加传递消息div。在totalBag调用时，单独更新内容。如果遇到问题，请尝试告诉我ny问题。@决心学习已修复了文本复制的问题。还添加了注释以加深理解。同样，这非常有效，注释对理解它有很大帮助。感谢您的所有工作！