嵌套 jQuery 个步骤 - Main Next 上不显示任何内容

Question

我有一个带有嵌套 jQuery 步骤的简单 html 表单。

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

当单击主向导的 "Next" 时，步骤会移动并显示内容，但在第 3 步（带有子向导的步骤）之后，选项卡移动到第 4r 步，但到达第 4r 步时没有内容显示，如果我禁用显示子向导的 jQuery 脚本，主要的第 4r 步显示内容。

我尝试了各种论坛，也开始调试 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>

Answer 1

试试这个 JSfiddle working sample that I made based on the solution suggested by @medievo in this post.

显然，问题在于 main-wizard 的 onStepChange 事件处理程序在 sub-wizard 初始化和显示后不再被调用。我可能会在调试库后提供其他信息。会让你更新。

关于解决方案：

假设我们有两个 functions 使用 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 处理程序使 sub-wizard 在第一次调用时被初始化和显示，并在下一次调用中显示。

另请注意，onStepChanged 处理程序通过隐藏 previous-step view 和显示 next-step view 来切换视图。

sub-wizard 的函数如下所示：

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 class那个[=20]来判断sub-wizard是否已经初始化=] 添加。如果它已经初始化，我们只需要 show() 它。

另请注意，onFinished 处理程序使 main-wizard 继续 next-step。

希望这有助于解决您的问题。

编辑：

检查和调试代码后，问题是以下 jQuery 查询（库中的第 1196 行）从 main-wizard 和 sub-wizard 获取所有 steps content 和使过渡（从包含子向导的步骤到下一步）在它们之间变得混乱。

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

通过以下方式更改该行可以解决此问题。但是，还有一些其他行需要类似的修复。

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

另请注意，有一个 pull request 等待批准显然可以解决问题。但是，恕我直言，该拉取请求直接更改了库中的构建文件，它可能不会获得批准。

编辑 2：

已创建拉取请求 here 以解决有关 嵌套 jquery.steps 向导的问题。

嵌套 jQuery 个步骤 - Main Next 上不显示任何内容

Nested jQuery Steps - Nothing displays on Main Next

html

css

jquery

jquery-steps