我正在使用JQuery Steps作为我的注册表单。我正在使用的步骤是：个人＆gt;公司＆gt; Cofirm。如果文本框为空，我希望我的错误消息显示在“占位符”中，如果文本框中包含内容，则显示Toastr。
所有这些在我第一次调试时都能完美运行。我的所有自定义消息都显示出来，Toastr的工作正常。 但是，如果我尝试第二次注册另一个用户，我的自定义消息会丢失，它会在占位符中显示标准消息，但如果我有，例如，输入了无效的电子邮件，我不会收到任何消息但是文本框变红了，我不能进入下一步。 即使我停止调试并重新启动它，toastr和自定义消息也就消失了。如果我重新启动计算机，它将再次运行。
我已经阅读过关于事件委托的内容，我猜它与此有关，但我的问题是我的事件是JQuery Steps事件，比如onStepChanging，onFinished等，我不知道如何处理那些代表团。
这是我的Ajax表单。 _RegisterDetails将生成一个表，其中包含在前两个步骤中输入的所有信息：
<div id="steps-body-container" class="animated fadeInDown">
@using (Ajax.BeginForm("_RegisterDetails", "Account", new AjaxOptions
{
HttpMethod = "post",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "ajaxContent",
LoadingElementId = "loading"
}, new { defaultButton = "next-button" }))
{
@Html.AntiForgeryToken()
<h3>Användare</h3>
<fieldset class="panel panel-default">
<div class="panel-heading">
<h4 class="text-center">Fyll i användaruppgifter</h4>
</div>
<div class="sm-empty-div"></div>
@Html.ValidationSummary()
<div class="row register-textbox">
<div class="col-md-6 pull-left form-group input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-user"></i>
</span>
@Html.TextBoxFor(m => m.SurName, new {@class = "form-control user-textbox-left-1", placeholder = "Förnamn", @type = "SurName"})
</div>
<div class="col-md-6 pull-right form-group input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-user"></i>
</span>
@Html.TextBoxFor(m => m.LastName, new {@class = "form-control user-textbox-right-1", placeholder = "Efternamn", @type = "LastName"})
</div>
</div>
<div class="row register-textbox">
<div class="col-md-6 pull-left form-group input-group">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
@Html.TextBoxFor(m => m.Email, new {@class = "form-control user-textbox-left-2", placeholder = "Email", @type = "EmailAddress"})
</div>
<div class="col-md-6 pull-right form-group input-group">
<span class="input-group-addon">
<i class="fa fa-phone"></i>
</span>
@Html.TextBoxFor(m => m.PhoneNumber, new {@class = "form-control user-textbox-right-2", placeholder = "Telefonnummer", @type = "PhoneNumber"})
</div>
</div>
<div class="row register-textbox">
<div class="col-md-6 pull-left form-group input-group">
<span class="input-group-addon">
<i class="fa fa-unlock"></i>
</span>
@Html.PasswordFor(m => m.Password, new {@class = "form-control user-textbox-left-3", placeholder = "Lösenord", @type = "Password"})
</div>
<div class="col-md-6 pull-right form-group input-group">
<span class="input-group-addon">
<i class="fa fa-lock"></i>
</span>
@Html.PasswordFor(m => m.ConfirmPassword, new {@class = "form-control user-textbox-right-3", placeholder = "Bekräfta lösenord", @type = "Password"})
</div>
</div>
</fieldset>
<h3>Företag</h3>
<fieldset class="panel panel-default">
<div class="panel-heading">
<h4 class="text-center">Fyll i företagsuppgifter</h4>
</div>
<div class="sm-empty-div"></div>
@Html.ValidationSummary()
<div class="row register-textbox">
<div class="col-md-12 pull-left form-group input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-home"></i>
</span>
@Html.TextBoxFor(m => m.Name, new {@class = "form-control comp-texbox-1", placeholder = "Namn på företag"})
</div>
</div>
<div class="row register-textbox">
<div class="col-md-6 pull-left form-group input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-road"></i>
</span>
@Html.TextBoxFor(m => m.Street, new {@class = "form-control comp-texbox-left-2", placeholder = "Gatuadress"})
</div>
<div class="col-md-6 pull-right form-group input-group">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
@Html.TextBoxFor(m => m.ZipCode, new {@class = "form-control comp-texbox-right-2", placeholder = "Postnummer"})
</div>
</div>
<div class="row register-textbox">
<div class="col-md-6 pull-left form-group input-group">
<span class="input-group-addon">
<i class="fa fa-building"></i>
</span>
@Html.TextBoxFor(m => m.City, new {@class = "form-control comp-texbox-left-3", placeholder = "Stad"})
</div>
<div class="col-md-6 pull-right form-group input-group">
<span class="input-group-addon">
<i class="fa fa-globe"></i>
</span>
@Html.TextBoxFor(m => m.Country, new {@class = "form-control comp-texbox-right-3", placeholder = "Land"})
</div>
</div>
<input type="submit" value="submit" id="submit-btn" defaultbutton="next-button" style="display: none" />
</fieldset>
<h3>Bekräfta</h3>
<fieldset class="panel panel-default">
<div class="panel-heading">
<h4 class="text-center">Bekräfta dina uppgifter</h4>
</div>
<div class="sm-empty-div"></div>
<div id="ajaxContent">
</div>
<div id="loading"><i class="fa fa-4x fa-cog fa-spin"></i>
</div>
</fieldset>
}
</div>
这是我的步骤脚本，我的验证和Ajax调用将信息保存到数据库。
。$（ '＃提交-BTN'）的触发器（ “点击”）;触发submitbutton的click-function，因为Steps为下一步和完成生成了自己的按钮，我必须在第二步和第三步之间点击下一步，就像点击表单上的提交一样。
var registrationModel;
var form = $("#form0").show();
//Runs on Successful Ajax-post.
function RegisterSuccess(surName){
toastr.options = {
closeButton: "true",
preventDuplicates: "true",
showDuration: "400",
hideDuration: "400",
timeOut: "5000",
showEasing: "swing",
hideEasing: "linear",
showMethod: "slideDown",
hideMethod: "slideUp"
};
toastr.success("Ditt konto skapades korrekt. Välkommen till Mina Sidor, " + surName + "!");
}
$("#form0").steps({
headerTag: "h3",
bodyTag: "fieldset",
transitionEffect: "slideLeft",
transitionEffectSpeed: 700,
showFinishButtonAlways: false,
onStepChanging: function(event, currentIndex, newIndex) {
//Allow backtracking between second and first step.
if (currentIndex === 1 && newIndex === 0) {
return true;
}
//
if (currentIndex === 2 && newIndex === 1) {
$(".content").animate({
height: "0px"
}, 1000);
}
return form.valid();
},
onStepChanged: function (event, currentIndex, priorIndex) {
var priorTab = $("#form0-t-" + priorIndex);
priorTab.removeClass("error");
if (priorIndex === 1 && currentIndex === 2) {
$(function () {
$('#submit-btn').trigger("click");
});
$(".content").animate({
height: "500px"
}, 1000);
}
},
onFinished: function (event, currentIndex) {
registrationModel = {
SurName: document.getElementById("SurName").value,
LastName: document.getElementById("LastName").value,
Email: document.getElementById("Email").value,
PhoneNumber: document.getElementById("PhoneNumber").value,
Password: document.getElementById("Password").value,
Name: document.getElementById("Name").value,
Street: document.getElementById("Street").value,
ZipCode: document.getElementById("ZipCode").value,
City: document.getElementById("City").value,
Country: document.getElementById("Country").value
};
//Save information to DB
$.ajax({
url: '@Url.Action("SaveRegisterDetailsToDb")',
type: "POST",
data: JSON.stringify(registrationModel),
dataType: "text",
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
},
success: function (data) {
if (data === "success") {
RegisterSuccess(registrationModel.SurName);
setTimeout(function() {
var url = '@Url.Action("Index", "Customer")';
window.location.href = url;
}, 5000);
}
},
contentType: "application/json"
});
},
autoFocus: true
}).validate({
rules: {
SurName: {
required: true,
minlength: 2
//textonly: true
},
LastName: {
required: true,
minlength: 2
//textonly: true
},
Email: {
required: true,
email: true
},
PhoneNumber: {
required: true,
number: true,
minlength: 7
},
Password: {
required: true,
minlength: 6
},
ConfirmPassword: {
equalTo: "#Password"
},
Name: {
required: true,
minlength: 2
//textonly: true
},
Street: {
required: true,
minlength: 4
},
ZipCode: {
required: true,
number: true,
minlength: 5
},
City: {
required: true,
//textonly: true,
minlength: 2
},
Country: {
required: true,
//textonly: true,
minlength: 2
}
},
//Sorry for all the swedish in the messages. :)
messages: {
SurName: {
required: "Skriv i ditt förnamn här.",
minlength: "Ditt förnamn måste innehålla minst 2 bokstäver."
//textonly: true
},
LastName: {
required: "Skriv i ditt efternamn här.",
minlength: "Ditt efternamn måste innehålla minst 2 bokstäver"
//textonly: true
},
Email: {
required: "Skriv i din email här.",
email: "Din email måste vara i ett korrekt format, {XX@XX.XX}"
},
PhoneNumber: {
required: "Skriv i ditt telefonnummer här.",
number: "Ditt telefonnummer får endast bestå av siffror.",
minlength: "Ditt telefonnummer måste innehålla minst 7 siffror."
},
Password: {
required: "Skriv i ditt lösenord här.",
minlength: "Ditt lösenord måste innehålla minst 6 tecken."
},
ConfirmPassword: {
equalTo: "Lösenorden stämmer ej överens. Var vänlig kontrollera stavning."
},
Name: {
required: "Skriv i ditt företagsnamn här.",
minlength: "Ditt företag måste innehålla minst 2 tecken."
//textonly: true
},
Street: {
required: "Skriv i företagsadressen här.",
minlength: "Adressen måste innehålla minst 2 tecken."
},
ZipCode: {
required: "Skriv i postnummer här.",
number: "Ditt postnummer får endast innehålla siffror.",
minlength: "Ditt postnummer måste bestå av minst 5 siffror."
},
City: {
required: "Skriv i staden här.",
//textonly: true,
minlength: "Stad måste innehålla minst 2 bokstäver."
},
Country: {
required: "Skriv i landet här.",
//textonly: true,
minlength: "Landet måste innehålla minst 2 bokstäver."
}
},
errorPlacement: function (error, element) {
//Placing error messages in placeholders when empty.
if (element.val() === "") {
element.attr("placeholder", error.text());
}
//Pop toastr for error message when textbox has content.
if(element.val() !== "") {
toastr.options = {
positionClass: 'toast-right-center', //Custom position.
closeButton: "true",
preventDuplicates: "true",
showDuration: "400",
hideDuration: "400",
timeOut: "10000",
showEasing: "swing",
hideEasing: "linear",
showMethod: "fadeIn",
hideMethod: "fadeOut"
};
toastr.error(error.text());
}
}
});
所以，我的最后一个问题是： 为什么这只能工作一次，如果它与事件委托有关，我应该将哪一部分绑定到什么？
更新
当我调试网站时，会生成一些旧代码，例如行
<div id="loading"><i class="fa fa-4x fa-cog fa-spin"></i></div>
在浏览器中
<div id="loading"><i class="fa fa-4x fa-circle-o-notch fa-spin"></i></div>
这是我以前用过的图标。这可能与我的原始问题有关吗？有问题的div位于第三步。 我注意到，当网站表现得如此时，正在使用cog-icon。 我完全被这个困惑了，所以希望有人知道发生了什么。
答案 0 :(得分：0)
您可能需要在ajax回发后再次执行您的Steps脚本，以便将事件重新分配给返回的新HTML。