奇怪的jQuery/JavaScript错误触发脚本
我有一个带有窗体的色盒模式窗口。如果我点击发布一个ajax请求的表单,它会发送数据,然后返回新的html,覆盖modalshtml 我得到了与“添加”完全相同的代码,只是编辑发送id的代码有一些细微的区别。它在视觉上运行良好,数据被保存等,但在编辑和添加页面上都有一个脚本标记,执行该标记以突出显示有验证错误的输入字段。对于add,它可以工作,但对于编辑,它不会触发脚本标记中的js代码,这几乎就像脚本标记不在那里一样,但我可以在带有firebug的html中看到它。我可以将代码复制到控制台并运行它,它就可以工作了。没有错误。我尝试用一个简单的console.log替换代码,但也没有触发 有一件事是,如果我使用jQuery 1.8,它可以工作,但是jQuery 1.10不能工作,但是我已经完成了所有的代码,我看不到任何错误,加上我使用迁移插件运行它,当单击编辑项目的按钮时,我什么也看不到 你知道为什么它不会触发js吗 代码如下: ajax请求:奇怪的jQuery/JavaScript错误触发脚本,javascript,Javascript,我有一个带有窗体的色盒模式窗口。如果我点击发布一个ajax请求的表单,它会发送数据,然后返回新的html,覆盖modalshtml 我得到了与“添加”完全相同的代码,只是编辑发送id的代码有一些细微的区别。它在视觉上运行良好,数据被保存等,但在编辑和添加页面上都有一个脚本标记,执行该标记以突出显示有验证错误的输入字段。对于add,它可以工作,但对于编辑,它不会触发脚本标记中的js代码,这几乎就像脚本标记不在那里一样,但我可以在带有firebug的html中看到它。我可以将代码复制到控制台并运行它
$.ajax({
type:ajaxType,
url:url,
data:$("#addEditAddressForm").serialize(),
success:function (response) {
if (ajaxType == "POST") {
$("#colorbox .content").html(response);
$("#selectedAddress").show();
if ($(response).find(".globalAlert").hasClass('grey')) {
$('.addAddressSection').removeClass('noDisplay');
$('.addressList, .buttonsContainer').hide();
}
else {
$('.addAddressSection').addClass('noDisplay');
$('.addressList, .buttonsContainer').show();
}
} else {
$("#colorbox .content").html(response);
$('.addAddressSection').removeClass('noDisplay');
if ($('.addEditAddressForm').hasClass('noDisplay')) {
$('.addressList, .buttonsContainer').show();
}
else {
$('.addressList, .buttonsContainer').hide();
}
}
$.colorbox.resize();
}
});
Ajax工作正常
以下是html:
<div class="addEditContactSection noDisplay">
#if($!editMode)
<h2>Edit Contact</h2>
#else
<h2>Add Contact</h2>
#end
#errorMessages($errors)
<form accept-charset="UTF-8" action="addContact" method="post" id="addEditContactForm">
<input type="hidden" value="$!contact.id" name="id" id="id" />
<input type="hidden" value="$!custId" name="custId" id="custId" />
<fieldset class="internal">
#if($!editMode)
<legend>$!contact.firstName $!contact.lastName</legend>
#else
<legend>Contact Details</legend>
#end
<dl>
<dt class="clear">
<label for="firstName">First Name*</label>
</dt>
<dd>
<input type="text" value="$!contact.firstName" name="firstName" id="firstName" maxlength="40"/>
</dd>
<dt class="clear">
<label for="lastName">Last Name*</label>
</dt>
<dd>
<input type="text" value="$!contact.lastName" name="lastName" id="lastName" maxlength="40"/>
</dd>
<dt class="clear">
<label for="email">Email*</label>
</dt>
<dd>
<input type="text" value="$!contact.email" name="email" id="email" maxlength="70"/>
</dd>
<dt class="clear">
<label for="telephone">Telephone*</label>
</dt>
<dd>
<input type="text" value="$!contact.telephone" name="telephone" id="telephone" />
</dd>
<dt class="clear">
<label for="mobileTelephone">Mobile Phone</label>
</dt>
<dd>
<input type="text" value="$!contact.mobileTelephone" name="mobileTelephone" id="mobileTelephone" />
</dd>
</dl>
<div class="contactButtons">
<input id="saveContact" type="submit" value="Save Contact" name="saveContact" class="overLayContactLink submitButton #if($!editMode)editContact#else addContactNew #end submitFormLight"/>
</div>
</fieldset>
</form>
</div>
这是页面上的脚本,它适用于其中一个,而不适用于另一个
$document.readyfunction{
var errorFields=$!fieldNames;
var i;
var fieldsArr=errorFields.split
for (i = 0; i <= fieldsArr.length - 1; i++) {
$("#" + fieldsArr[i]).addClass("error");
$("#" + fieldsArr[i]).parent().prev().children("label").addClass("labelError");
}
})
</script>
经过大量的调试和尝试之后,这一切都是由于响应代码被放在了哪里 我改变了这一行:
$("#colorbox .content").html(response);
将是:
$("#showContactList").html(response);
它是同一个div,但是使用id它工作了。
我不是100%确定为什么这会使它工作,但它做到了,感谢上帝!
我唯一的想法就是为什么我会看这个,是在某个阶段,我在课堂上看到了2个div。内容可能会让js变得混乱,但有趣的是,它在jQuery 1.8中工作得很好。请添加代码,如果我们没有看到代码,很难猜出问题出在哪里。不知道,因为你没有发布任何代码。我计算了527个不同的reasons这可能会发生。说真的,发布你的代码。如果我在脚本标记中添加了警报或控制台日志,那么jQuery不会触发。没有任何显示-我尽可能地添加了我的代码now@Lee不幸的是,您必须进行一些调试,然后您可以问一个更具体的问题,比如:在函数x中,我希望变量y是“某物”,但这是“其他的东西”。我们不可能调试您发布的代码。如果您真的需要他人帮助,请创建一个可以让我们看到问题所在的环境