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

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

Main向导包含5个步骤，第3步包含包含3个步骤的sub向导。

当单击主向导的“下一步”时，将移动步骤并显示内容，但在第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>

最佳答案

试试我根据@medievo在JSfiddle working sample中建议的解决方案制作的 this post 。

显然，问题在于，一旦初始化并显示了onStepChange，就不再以某种方式不再调用main-wizard的sub-wizard事件处理程序。调试库后，我可能会提供其他信息。将使您保持更新。

关于解决方案:

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

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来切换 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语句，通过询问sub-wizard是否已经具有wizard添加的jquery.steps类来标识show()是否已经初始化。如果它已经被初始化，我们只需要对其进行onFinished即可。

还要注意，main-wizard处理程序使next-step继续jQuery。

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

编辑:

在检查并调试了代码之后，问题在于以下steps content查询(库中的第1196行)从main-wizard和sub-wizard获取了所有ojit_code，并使转换(从包含子向导的步骤到下一步)变得困惑在他们中间。

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

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

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

还要注意，有一个pull request待批准，显然可以解决此问题。但是，恕我直言，该拉取请求会直接从库中更改生成的文件，并且可能不会获得批准。

编辑2:

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