在按钮上运行Jquery代码的问题单击我的向导步骤Jquery代码

我正在为视图中的表单使用向导步骤，我的项目在MVC3上。

我有一个由3个步骤组成的表格，这意味着我的表格中每个步骤都有三个标签以及以下两个按钮：

<p><input type="button" id="next-step" class="next-step-client-val" name="next-step" value="Next" /></p><     
<p><input type="button" value="Back id="back-step" name="back-step"></p>

在我的第一步中，我只有一堆TextBoxes、DropDownlists和TextAreas，第二步有很多客户端功能，例如用户可以将行从一个表移动到另一个表等等

                var customTbl = $('#CustomPickedTable');
                var has1 = customTbl.find('td[data-row="1"]').is('*');
                var has2 = customTbl.find('td[data-row="2"]').is('*');
                var has3 = customTbl.find('td[data-row="3"]').is('*');
                var has4 = customTbl.find('td[data-row="4"]').is('*');
                if ((has1 === true) && (has2 === true) && (has3 === true) && (has4 === true)) {
                    jAlerts("Saved", "Info");
                } else {
                    jAlert('You have to move atleast one row from each table', "Varning"); ;
                     return false
                }

在第三步中，它只是对创建内容的审查，当用户点击时，我的下一步按钮会提交表单。

我想做的是，当用户在第2步并单击"下一步"按钮时，应该运行上面的jquery验证。使用我的向导步骤代码，我无法做到这一点，因为它使用下一步按钮选择器进行所有操作。对此有什么解决方案吗？

我试图将Jquery验证码放入

$("#next-step").click(function () {
}

但是，每次用户单击"下一步"按钮时，我的jquery验证代码都会运行，因为我的表显示在表单中，但被隐藏了，当用户单击下一步时，验证会在第一步触发。所以这个解决方案不起作用。

这是我的向导步骤Jquery代码，现在我在底部有我的Jquery验证，这意味着当我在第三步并单击下一步按钮时，它将验证并发布。但我不想那样。我希望在第2步进行验证。

这是代码：

$(function () {
            $(".wizard-step:first").fadeIn(); // show first step
            // attach backStep button handler
            // hide on first step
            $("#back-step").hide().click(function () {
                var $step = $(".wizard-step:visible"); // get current step
                if ($step.prev().hasClass("wizard-step")) { // is there any previous step?
                    $step.hide().prev().fadeIn(4500);  // show it and hide current step
                    // disable backstep button?
                    if (!$step.prev().prev().hasClass("wizard-step")) {
                        $("#back-step").hide();
                    }
                }
            });

            // attach nextStep button handler       
            $("#next-step").click(function () {
                var $step = $(".wizard-step:visible"); // get current step
                var validator = $("form").validate(); // obtain validator
                var anyError = false;
                $step.find("select").each(function () {
                    if (!this.disabled && !validator.element(this)) { // validate every input element inside this step
                        anyError = true;
                    }
                });
                $step.find("input").each(function () {
                    if (!validator.element(this)) { // validate every input element inside this step
                        anyError = true;
                    }
                });
                $("#next-step").click(function () {
                    if (!validator.element(this)) { // validate every input element inside this step
                        anyError = true;
                    }

                });
                if (anyError)
                    return false; // exit if any error found
                if ($step.next().hasClass("confirm")) { // is it confirmation?
                    // show confirmation asynchronously
                    $.post("/wizard/confirm", $("form").serialize(), function (r) {
                        // inject response in confirmation step
                        $(".wizard-step.confirm").html(r);
                    });
                }
                if ($step.next().hasClass("wizard-step")) { // is there any next step?
                    $step.hide().next().fadeIn(4500);  // show it and hide current step
                    $("#back-step").show();   // recall to show backStep button
                }
                else { // this is last step, submit form
                    var selectedQuestions = $("#SelectedQuestions");
                    var selectedCustomQuestions = $("#SelectedCustomQuestions");
                    var currentIds = new Array();
                    var currentText = new Array();
                    $("#CustomPickedTable td[data-question-id]").each(function () {
                        var clickedId = $(this).attr("data-question-id");
                        currentIds.push(clickedId);
                    });
                    $('#CustomPickedTable td[data-attr-id]').each(function () {
                        var ClickedText = $(this).html();
                        currentText.push(ClickedText);
                    });
                    selectedCustomQuestions.val(currentText.join("|"));
                    selectedQuestions.val(currentIds.join(","));
                    var customTbl = $('#CustomPickedTable');
                    var has1 = customTbl.find('td[data-row="1"]').is('*');
                    var has2 = customTbl.find('td[data-row="2"]').is('*');
                    var has3 = customTbl.find('td[data-row="3"]').is('*');
                    var has4 = customTbl.find('td[data-row="4"]').is('*');
                    if ((has1 === true) && (has2 === true) && (has3 === true) && (has4 === true)) {
                        jAlerts("saved", "Info");
                    } else {
                        jAlert('You have to move atleast one row from each table', "Varning"); ;
                    }
                    return false;
                }
            });

我的html代码看起来像这样：

<div class="wizard-step>
   //step 1 content
</div>
<div class="wizard-step>
//step 2 content
</div>
<div class="wizard-step>
//step 3 content
</div>
<p><input type="button" id="next-step" class="next-step-client-val" name="next-step" value="Next" /></p><     
<p><input type="button" value="Back id="back-step" name="back-step"></p>