嵌套的jQuery步骤 - Main Next上没有显示任何内容

Question

我有一个简单的html表单,嵌套jQuery步骤.

主向导有5个步骤,第3步有一个包含3个步骤的子向导.

当单击主向导的"下一步"时,移动步骤并显示内容,但在第3步(具有子向导的步骤)之后,选项卡移动到4rth但是在到达4rth步骤时没有显示内容,如果我禁用了显示子向导的jQuery脚本,主要的4rth步骤显示内容.

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

试试这个基于@medievo在本文中提出的解决方案制作的JSfiddle工作样本.

显然,问题在于,一旦初始化并显示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.

功能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的查询(行号1196来自库)获取所有steps content的main-wizard和sub-wizard,使转变(从包含的子向导下一步的步骤)中它们被搞砸了.

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

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

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

另请注意,有一个待批准的拉取请求显然可以解决问题.但是,恕我直言,拉请求直接从库中更改了构建的文件,它可能不会被批准.

编辑2:

在此处创建拉取请求以解决有关嵌套jquery.steps向导的问题.