AJAXで関数を呼び出す

Question

これを完全に説明する方法がわかりませんが、これが意味をなされることを願っています。

私は、バスケットの合計額が特定の閾値内にある場合、無料配送の対象となるために費やす残額を計算する機能を持っています。

商品がバスケットに追加されるたびに、バスケット値がAJAXで更新されます。

AJAX生成モーダルには、バスケットに追加ボタンが表示されます。

AJAXで生成されたAJAX生成のバスケットボタンがクリックされたときに、製品がバスケットに追加されるたびに呼び出される必要があります。私はこれですべてを以下のようにしようとしていますが、正しく動作していないようです。問題の1つは、バスケットに追加ボタンがクリックされたときにイベントが複数回発生し、イベント後にバスケット合計が更新され、合計が正しく計算されないということです。

誰も私がこれをすべて整理する方法を説明できますか？

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

EDIT：テキストが重複していた問題を修正しました。また、より多くの理解のためにコメントを追加しました。

---

指定したリンクにチェックが入っていて、次の修正コードを試してみました。

@ADysonによれば、複数イベントの発生を修正しているクリックイベントを削除しました。

他の問題については、イベントの後に合計が更新されます。はい、ajaxSuccessがトリガーされた後にHTMLが更新されています。したがって、ajaxSuccessイベント自体を使用してbasket量を取得し、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);