クリックイベントリスナーの前にコールバック関数を呼び出すAJAX関数

Question

次のコードは、完了後、車両オブジェクト値をpopulateSummaryBlocksコールバック関数に渡すAJAX要求を処理します。コールバック関数はclickイベントをリッスンするように設定されていますが、コードはAJAX要求が完了した直後にトリガーされます。コールバック関数の即時起動を防ぎ、ボタンのデフォルトの動作を無効にするために、コード内で調整する必要があるもの

$("#get-rego").click(function(e) { 
    e.preventDefault(); 

    var regoAjax = document.querySelector(".ajax-loader"); 
    addClass(regoAjax, "active"); 

    var plate = document.getElementById("input_2_6").value; 

    var requestData = $.post({ 
    url: "/wp-admin/admin-ajax.php", 
    data: { 
     "action": "get_vehicle", 
     "plate": plate, 
    }, 
    "dataType": "json" 
    }); 

    requestData.done(function(obj) { 
    var response = obj.idh; 
    var vehicleMake, 
     vehicleModel, 
     vehicleYear, 
     vehicleColour, 
     vehicleSubModel, 
     vehicleBodyStyle, 
     vehicleWofExpiry, 
     vehicleRegoExpiry; 

    removeClass(regoAjax, "active"); 
    removeClass(vehicleDetails, "gfield_conditionally_hidden"); 
    vehicleMake = response.vehicle.make; 
    vehicleModel = response.vehicle.model; 
    vehicleYear = response.vehicle.year_of_manufacture; 
    vehicleColour = response.vehicle.main_colour; 
    vehicleSubModel = response.vehicle.submodel; 
    vehicleBodyStyle = response.vehicle.body_style; 
    vehicleWofExpiry = response.vehicle.expiry_date_of_last_successful_wof; 
    vehicleRegoExpiry = response.vehicle.date_of_last_registration; 

    var vehicleDataSummaryOutput; 
    vehicleDataSummaryOutput = "<div class=\"summary\">" + 
     "<ul>" + 
     "<li><span class=\"label\">Make:</span> " + titleCase(vehicleMake) + "</li>" + 
     "<li><span class=\"label\">Model:</span> " + titleCase(vehicleModel) + "</li>" + 
     "<li><span class=\"label\">Year:</span> " + vehicleYear + "</li>" + 
     "<li><span class=\"label\">Colour:</span> " + vehicleColour + "</li>" + 
     "<li><span class=\"label\">Submodel:</span> " + titleCase(vehicleSubModel) + "</li>" + 
     "<li><span class=\"label\">Body Style:</span> " + vehicleBodyStyle + "</li>" + 
     "</ul>" + 
     "</div>"; 

    document.querySelector(".vehicle-details").innerHTML = vehicleDataSummaryOutput; 
    populateSummaryBlocks(response.vehicle); 
    }); 

    requestData.fail(function(jqXHR, textStatus) { 
    alert("Request failed: " + textStatus); 
    }); 
}); 

var customerName = document.getElementById("input_2_46_3").value; 
var summaryBlocks = document.getElementsByClassName("summary-block"); 
var getQuoteSummaryBlock = summaryBlocks[0]; 
var mbiPaymentSummaryBlock = summaryBlocks[1]; 
var mbiWeekly = document.querySelector(".mbi-weekly"); 
var quoteLegalText = document.querySelector(".quote-legal-text"); 
var quoteNextButton = document.getElementById("gform_next_button_2_63"); 

function populateSummaryBlocks(vehicle, customerName) { 
    var vehicleMake = vehicle.make; 
    var vehicleModel = vehicle.model; 
    var mbiWeeklyPrices = [ 
    "7.29", 
    "11.74", 
    "46.12" 
    ]; 

    if(document.querySelector('input[name="input_52"]:checked').value = "standard") { 
    mbiWeekly.innerHTML = mbiWeeklyPrices[0]; 
    } else if(document.querySelector('input[name="input_52"]:checked').value = "special") { 
    mbiWeekly.innerHTML = mbiWeeklyPrices[1]; 
    } else { 
    mbiWeekly.innerHTML = mbiWeeklyPrices[2]; 
    } 

    removeClass(getQuoteSummaryBlock, "gfield_conditionally_hidden"); 
    removeClass(mbiPaymentSummaryBlock, "gfield_conditionally_hidden"); 
    removeClass(quoteLegalText, "gfield_conditionally_hidden"); 
    addClass(quoteNextButton, "is-enabled"); 

    document.querySelector(".quote-advice-content").appendChild(quoteNextButton); 

    var vehicleMakeText = document.body.querySelectorAll(".vehicle-make-text"); 
    for (var i = 0; i < vehicleMakeText.length; i++) { 
    var make = vehicleMakeText[i]; 
    if (typeof vehicleMake !== "undefined") { 
     make.innerHTML = vehicleMake; 
    } 
    } 

    var vehicleModelText = document.body.querySelectorAll(".vehicle-model-text"); 
    for (var i = 0; i < vehicleModelText.length; i++) { 
    var model = vehicleModelText[i]; 
    if (typeof vehicleModel !== "undefined") { 
     model.innerHTML = vehicleModel; 
    } 
    } 

    var customerNameText = document.body.querySelectorAll(".customer-first-name-text"); 
    for (var i = 0; i < customerNameText.length; i++) { 
    var name = customerNameText[i]; 
    if (typeof customerName !== "undefined") { 
     name.innerHTML = customerName; 
    } 
    } 
    document.querySelector("#getQuote").style.display = "none"; 
} 
document.querySelector("#getQuote").addEventListener("click", populateSummaryBlocks, false); 

Answer 1

2つ目の行をローカライズするのに役立つ2つの行をコピーしました。

document.querySelector(".vehicle-details").innerHTML = vehicleDataSummaryOutput; 
populateSummaryBlocks(response.vehicle); 

populateSummaryBlocksは、リクエスト時にクリックすると呼び出されます。あなたはonClickイベントリスナーからのみ呼び出す必要があります。

---

あなたはそうのように、イベントに呼ばれるデフォルトのメソッドを防ぐとともに、それにイベントリスナーを追加することで、ボタンのデフォルトの動作を無効にする：

button.addEventListener('click', function(event) { 
    event.preventDefault(); 
}