javascript - 为什么我的代码一直使用 smartwizard 插件发送 ajax 调用？

Question

我有一个插件，可以在我的网站上创建一个包含步骤的表单。

这是我拨打电话的代码：

$(document).ready(function(){
    $('#smartwizard').smartWizard({
      lang: {
            next: 'Volgende',
            previous: 'Vorige'
        },
        useURLhash: false,
        showStepURLhash: false
    });

    $("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber, stepDirection) {
      var form_data = $("#step_"+ stepNumber +"_form").serialize();
      $.ajax({
        type:'post',
        url:"catalog/calcdiv.php",
        data:form_data,
        success:function(data){
           // indicate the ajax has been done, release the next step
           $("#smartwizard").smartWizard("next");
        }
      });
      // Return false to cancel the `leaveStep` event
      // and so the navigation to next step which is handled inside success callback.
      return false;
    });
});

它应该只是进行调用并进入下一步，而不是保持在同一步骤并继续进行 ajax 调用，如下图所示：

Answer 1

该行将$("#smartwizard").smartWizard("next");再次调用“leaveStep”事件，这就是您卡在事件调用上的原因。您可以使用标志来避免为从 ajax 成功调用的“leaveStep”执行 ajax。这是类似的问题https://github.com/techlab/SmartWizard/issues/20

试试这个代码。

var ajaxInvoke = false;

$("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber, stepDirection) {
      if (ajaxInvoke == false) {
         var form_data = $("#step_"+ stepNumber +"_form").serialize();
         $.ajax({
            type:'post',
            url:"catalog/calcdiv.php",
            data:form_data,
            success:function(data){
               // indicate the ajax has been done, release the next step
               ajaxInvoke = true;
               $("#smartwizard").smartWizard("next");
            }
          });
      } else {
          ajaxInvoke = false;
      }

      // Return false to cancel the `leaveStep` event
      // and so the navigation to next step which is handled inside success callback.
      return false;
});