Question

以下代码处理AJAX请求，完成后将车辆对象值传递给populateSummaryBlocks回调函数。回调函数设置为侦听单击事件，但在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

我复制了两行来帮助你定位第二行。

java.util.List

document.querySelector(".vehicle-details").innerHTML = vehicleDataSummaryOutput; populateSummaryBlocks(response.vehicle);也会在请求就绪时点击。您只需要从onClick事件侦听器调用它。

你可以通过添加一个事件监听器来禁用该按钮的默认行为，同时防止在事件上调用默认方法，如下所示：

populateSummaryBlocks

AJAX函数在单击事件侦听器之前触发回调函数

1 个答案: