我有一个带有嵌套 jQuery 步骤的简单 html 表单。
主向导有 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>最佳答案
试试这个 JSfiddle working sample 我根据@medievo 在 this post 中建议的解决方案制作的.
显然，问题是一旦 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 处理程序使 sub-wizard 在第一次调用时被初始化和显示，并在下一次调用中显示。
另请注意，onStepChanged 处理程序通过隐藏上一步 View 并显示下一步 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 语句通过询问它是否已经有wizard 来识别sub-wizard 是否已经初始化jquery.steps 添加的类。如果它已经初始化，我们只需要 show() 它。
另请注意，onFinished 处理程序使 main-wizard 继续下一步。
希望这有助于解决您的问题。
编辑:
检查和调试代码后，问题是以下 jQuery 查询(库中的第 1196 行)从 main-wizard< 获取所有 steps content/code> 和 sub-wizard 并使转换(从包含 sub-wizard 的步骤到下一步)在它们之间变得困惑。
var stepContents = wizard.find(".content > .body")
通过以下行更改该行可解决此问题。但是，还有一些其他行需要类似的修复。
var stepContents = wizard.find("> .content > .body")
另请注意，有一个 pull request等待批准显然可以解决问题。但是，恕我直言，该拉取请求直接更改了库中的构建文件，它可能不会获得批准。
编辑 2:
已创建拉取请求 here解决有关嵌套 jquery.steps 向导的问题。
关于jquery - 嵌套的 jQuery 步骤 - Main Next 上没有任何显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32360005/