嵌套的jQuery步骤 - 主下一步上没有显示任何内容

Question

我有一个简单的html表单，其中包含嵌套的jQuery步骤。

主向导有5个步骤，第3个步骤有一个包含3个步骤的子向导。

当点击主向导的“下一步”时，步骤移动并显示内容，但在第3个步骤（具有子向导的步骤）之后，选项卡移动到第4步，但到达第4步时不显示任何内容。如果我禁用显示子向导的jQuery脚本，则主要的第4步将显示内容。

我尝试了各种论坛，并开始调试jQuery Steps库，但一直找不到原因。

感谢任何帮助。

以下是可执行代码：

    $("#frmMainWizard").steps({
      headerTag: "h3",
      bodyTag: "section",
      transitionEffect: "slide", // "fade", 
      stepsOrientation: "vertical"
        //enableAllSteps: true,
        //enablePagination: false,

    });

    var childForms = $(".frmWizardSteps");
    $.each(childForms, function() {
      console.log(this.id);
      var currentSubStesId = '#' + this.id;
      $(currentSubStesId).steps({
        headerTag: "h4",
        bodyTag: "div",
        transitionEffect: "slideLeft",
        stepsOrientation: "vertical"
          //autoFocus: true,
          //enableAllSteps: true,
          //enablePagination: false
      });

    });

    $('#btnPrev').click(function() {
      $("#frmMainWizard").steps('previous');
    });

    $('#btnNext').click(function() {
      $("#frmMainWizard").steps('next');
    });

/* Wizard styles - override jquery steps */

.wizard.clearfix > .content.clearfix {
  overflow: auto !important;
}
/*
.frmMainWizard
{
    border-style: solid;
    border-color: blue;
    border-width: 5px;
    overflow:auto !important;
}
*/

/*
.frmWizardSteps 
{
    border-style: solid;
    border-color: red;
    border-width: 5px;
    overflow:auto !important;
}
*/

.frmWizardSteps.wizard,
.frmWizardSteps.tabcontrol {
  width: 95% !important;
}
.frmWizardSteps.wizard > .steps a,
.frmWizardSteps.wizard > .steps a:hover,
.frmWizardSteps.wizard > .steps a:active {
  padding: 0.5em 0.5em !important;
}
.frmWizardSteps .content {
  /*position: relative !important;*/
  min-height: 20em !important;
}
.frmWizardSteps > .actions > ul {
  display: inline-block;
  text-align: right;
}

<link href="https://godwin.azurewebsites.net/content/jquery.steps.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://godwin.azurewebsites.net/Scripts/jquery.steps.js"></script>

<div id="frmMainWizard">

  <h3>Pre prerequisites</h3>
  <section>

    <input id="aak_0" name="aak_0" type="checkbox" value="true" />
    <label>Agent Acknowledgement</label>
    <textarea class="form-control" cols="20" id="hm_0" name="hm_0" rows="5" style="min-width: 350px; width:auto;">Help material for Pre prerequisites</textarea>

    <br />
    <input id="sc_0" name="sc_0" type="checkbox" value="true" />
    <label>Completed this step</label>
    <br />

  </section>

  <h3>Prerequisites</h3>
  <section>

    <input id="aak_1" name="aak_1" type="checkbox" value="true" />
    <label>Agent Acknowledgement</label>
    <textarea class="form-control" cols="20" id="hm_1" name="hm_1" rows="5" style="min-width: 350px; width:auto;">Help material for prerequisites</textarea>

    <br />
    <input id="sc_1" name="sc_1" type="checkbox" value="true" />
    <label>Completed this step</label>
    <br />

  </section>

  <h3>Actual work</h3>
  <section>

    <br />
    <input id="aak_2" name="aak_2" type="checkbox" value="true" />
    <label>Agent Acknowledgement</label>
    <textarea class="form-control" cols="20" id="hm_2" name="hm_2" rows="5" style="min-width: 350px; width:auto;">Help material for Actual work</textarea>

    <br />
    <br />

    <div class="frmWizardSteps" id="frmWizardStep_c7514cd1-bf01-4adb-ba2a-4cd546bfc0a1">
      <h4>Pre work</h4>
      <div>
        <br />
        <br />

        <textarea class="form-control" cols="20" id="hm_2_0" name="hm_2_0" rows="5" style="min-width: 350px; width:auto;">Help for Pre work</textarea>
        <br />

      </div>

      <h4>Current work</h4>
      <div>

        <textarea class="form-control" cols="20" id="hm_2_1" name="hm_2_1" rows="5" style="min-width: 350px; width:auto;">Help for Current work</textarea>
        <br />

      </div>

      <h4>Post work</h4>
      <div>

        <textarea class="form-control" cols="20" id="hm_2_2" name="hm_2_2" rows="5" style="min-width: 350px; width:auto;">Help for Post work</textarea>
        <br />

      </div>
    </div>

  </section>

  <h3>Post actions</h3>
  <section>

    <input id="aak_3" name="aak_3" type="checkbox" value="true" />
    <label>Agent Acknowledgement</label>
    <textarea class="form-control" cols="20" id="hm_3" name="hm_3" rows="5" style="min-width: 350px; width:auto;">Help material for Post actions</textarea>

    <br />
    <input id="sc_2_3" name="sc_2_3" type="checkbox" value="true" />
    <label>Completed this step</label>
    <br />

  </section>

  <h3>Post post actions</h3>
  <section>

    <input id="aak_4" name="aak_4" type="checkbox" value="true" />
    <label>Agent Acknowledgement</label>
    <textarea class="form-control" cols="20" id="hm_4" name="hm_4" rows="5" style="min-width: 350px; width:auto;">Help material for Post post actions</textarea>

    <br />
    <input id="sc_3" name="sc_3" type="checkbox" value="true" />
    <label>Completed this step</label>
    <br />

  </section>

</div>

<div>
  <button id="btnPrev">MainPrev</button>
  <button id="btnNext">MainNext</button>
</div>

- Consult Yarla

---

这可能会对你有所帮助：https://github.com/rstaib/jquery-steps/issues/23 - J Santosh

我已经阅读了那篇文章，甚至阅读了与之相关的文章。根据这些文章，有人提供了一个解决方案，但是这个解决方案并没有包含在jquery-steps的1.1.0版本中。 - Consult Yarla

我尝试对jquery-steps库中的“refreshStepNavigation（）”函数进行更改，以便将属于当前向导的stepTitles（不包括子/嵌套向导）记录到文件中，但它没有起作用。这个函数有点可疑。 - Consult Yarla

Answer 1

请试试我基于@medievo在this post中提出的解决方案制作的JSfiddle working sample。

显然，问题在于当初始化并显示sub-wizard后，一些原因导致main-wizard的onStepChange事件处理程序不再被调用。在调试库之后，我可能会提供其他信息。将保持更新。

关于解决方案：

假设我们有两个函数，它们使用jquery.steps库来初始化main-wizard和sub-wizard。

main-wizard函数如下所示：

var shoMainWizard = function(){

    $("#main-wizard").steps({
        /* 
        All your jquery.steps config stuff here
        plus the following event handlers
        */

        onStepChanging: function (event, currStepIndex, nextStepIndex) {

            // If we are moving on the step which contains the sub-wizard (index 2)
            if (nextStepIndex == 2){ 
                shoSubWizard(currStepIndex, nextStepIndex);
            }

            return true;
        },

        onStepChanged: function (event, currStepIndex, priorStepIndex) {
            $("#main-wizard-p-" + priorStepIndex).hide();
            $("#main-wizard-p-" + currStepIndex).fadeIn();
        }
    });
};

请注意，onStepChanging 处理程序使 子向导 在第一次调用时被初始化并显示，而在下一次调用时只显示。

还要注意，onStepChanged 处理程序通过隐藏 上一个步骤视图 并显示 下一个步骤视图 来切换视图。 子向导 的函数如下所示：

var shoSubWizard = function(currStepIndex, nextStepIndex){

    // if sub-wizard note rendered yet
    if (!$('#sub-wizard').hasClass('wizard')){

            /* 
            All your jquery.steps config stuff here
            plus the following event handlers
            */

            onFinished: function() {
                $("#main-wizard").steps("next");
            }
        });
    }
    // otherwise, display sub-wizard with last changes
    else { 
        $("#main-wizard-p-" + currStepIndex).hide();
        $("#main-wizard-p-" + nextStepIndex).fadeIn();
    }
}

请注意，此处使用了 if 语句来判断是否已经通过询问是否有 wizard 类（由 jquery.steps 添加）来初始化 sub-wizard。如果已经初始化，则只需要使用 show() 方法即可。

还要注意，onFinished 处理程序使 main-wizard 继续进行下一步操作。

希望这可以帮助解决您的问题。

编辑：经过代码评审和调试，发现问题在于以下 jQuery 查询（库中的第 1196 行）从 main-wizard 和 sub-wizard 获取所有 steps content 并使它们之间的转换混乱。

var stepContents = wizard.find(".content > .body")

更改该行为以下行可解决问题。但是，还有其他几行需要类似修复。

var stepContents = wizard.find("> .content > .body")

注意，有一个拉取请求等待批准，似乎解决了这个问题。然而，在我看来，那个拉取请求直接更改了库中的已构建文件，可能不会被批准。 编辑2: 创建了此处的拉取请求，以解决关于嵌套jquery.steps向导的问题。

- leo.fcx

---

感谢您提供调试库的帮助，我将等待您的观察。 - Consult Yarla

在第1196行和862行对stepContents变量初始化进行了推荐更改。所有工作都完美无缺，没有任何解决方法。谢谢。 - Consult Yarla

嗨，注意到已经创建了一个拉取请求来修复这个问题。在这里查看它。 - leo.fcx