[英]jquery, firefox: event preventDefault does not work
我在MVC的视图中有以下代码:
<script src="../../Scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
@model IEnumerable<GeoGame.Models.ConsiderResponse>
@{
ViewBag.Title = "Show Second Day Comments";
}
<h2>
Show Second Day Comments</h2>
@using (Html.BeginForm("StoreThirdDayComments", "DiscussionForum", FormMethod.Post))
{
<p>
<a href="#" id="instrReminder">Instructions</a>
</p>
@Html.ValidationSummary(true)
<table>
<tr>
<th>
User
</th>
<th width="85%">
Comments
</th>
<th>
My reaction
</th>
</tr>
@foreach (var item in Model)
{
<tr class="choice">
<td>
@Html.DisplayFor(modelItem => item.memberNumber)
</td>
<td>
@Html.DisplayFor(modelItem => item.justification)
</td>
<td>
@Html.RadioButton("Opinion_" + item.ID, "Agree")<font style="background-color: green"
color="black"> Agree </font>
<br />
@Html.RadioButton("Opinion_" + item.ID, "Disagree")<font style="background-color: red"
color="black"> Disagree </font>
<br />
@Html.RadioButton("Opinion_" + item.ID, "Neither")<font style="background-color: yellow"
color="black"> Neutral </font>
</td>
</tr>
}
</table>
<br />
<label>
Please respond to <b>each</b> of your peers' comments using the following pattern:</label>
<br />
<br />
<text><i>I agree/disagree/am neutral with 1's comments because: (insert comments)</i></text>
<br />
<br />
<div>
<textarea rows="7" cols="75" id="ThirdDayComments" name="ThirdDayComments"></textarea>
</div>
<p>
<input type="submit" id="btnSubmit" value="Submit and answer question -->" />
</p>
}
<script type="text/javascript">
$(document).ready(function () {
$('#btnSubmit').click(function (e) {
var isValid = true;
if ($.trim($("#ThirdDayComments").val()) == '') {
isValid = false;
}
if ($('tr.choice').not(':has(:radio:checked)').length) {
isValid = false;
}
if (isValid == false) {
alert('Please choose agree, disagree, neutral for each comment and explain the reasons in the textbox provided');
}
if (isValid == false) {
e.returnValue = false;
e.preventDefault();
}
});
$('#instrReminder').click(function (e) {
alert("1. Read the comments made by your peers.\n2. Select agree/disagree/neutral for each of them.\n3. Fill out the text box according to the pattern mentioned.\n4. Click submit.\n5. You will be taken to a page with a question with multiple-choice answers.\n");
e.returnValue = false;
e.preventDefault();
});
});
</script>
当未选择单选按钮或未填充文本框时,我想阻止页面继续。 这适用于Chrome。
但是,在Firefox中,如果用户两次单击提交而不选择单选按钮或不填写文本框,则会弹出警告消息,并带有一条消息(如代码中所示),同时还会弹出“防止其他弹出窗口”。 选择该选项后,当我再次单击“提交”时,该页面将不再阻止默认设置。 它只是通过。 我不想要那样
我检查了很多其他帖子,但是他们似乎并没有完全解决此问题。
关于如何在Firefox中解决此问题的任何想法? 我正在使用版本36.0.1。
您需要将两个isValid == false
条件结合在一起,并将preventDefault
放在alert
之前。 尝试这个:
if (isValid == false) {
e.returnValue = false;
e.preventDefault();
alert('Please choose agree, disagree, neutral for each comment and explain the reasons in the textbox provided');
}
#instrReminder
元素的点击处理程序中需要执行相同的操作。
Firefox阻止了多个警报后,它返回错误。 解决方案是不要发出多次警报或根本不发出警报,事件处理程序的更好选择是表单提交,而不是单击提交按钮。
像这样-假设表单的ID为DiscussionForum
$('#DiscussionForum').on("submit",function (e) {
var isValid = true;
$("#message").empty();
if ($.trim($("#ThirdDayComments").val()) == '') {
isValid = false;
}
if ($('tr.choice').not(':has(:radio:checked)').length) {
isValid = false;
}
if (!isValid) {
e.returnValue = false;
e.preventDefault();
$("#message").html('Please choose agree, disagree, neutral for each comment and explain the reasons in the textbox provided');
}
});
告诉Firefox您不希望该页面产生更多警报后,对alert()
的调用会引发异常。
两种处理方法:
将您的调用包装在try catch
中的alert()
:
try { alert("whatever"); } catch (err) { console.log("denied"); }
现在将处理异常。
停止使用alert()
,因为它很丑陋,并会导致类似您现在面临的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.