【发布时间】：2014-12-01 04:05:42
【问题描述】：
问题
我一直在关注这个简单的教程，发现 here。但是，我想对其进行修改，以便仅在客户端单击提交时调用计算器。但是，当我单击提交按钮时，没有观察到任何操作。我什至没有看到警报。
编辑：
我已根据 Ojay 的建议修改了代码。但是，当我尝试调试时出现此错误。我得到了这个确切的issue，除了我有 VS13 更新 3。这里发生了多件事？
代码
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Sample Calculator</title>
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#my-calc').on('submit', function () {
alert("This button is working?");
calculate();
});
function calculate()
{
alert('hi');
//Add
try {
$('#sum').val((parseInt($('#num1').val())) + parseInt($('#num2').val()));
} catch (e) {
}
//Subtract
try {
$('#sub').val((parseInt($('#num1').val())) - parseInt($('#num2').val()));
} catch (e) {
}
//Multiply
try {
$('#mul').val((parseInt($('#num1').val())) * parseInt($('#num2').val()));
} catch (e) {
}
//Divide
try {
$('#div').val((parseInt($('#num1').val())) / parseInt($('#num2').val()));
} catch (e) {
}
}
});
</script>
</head>
<body>
<div><h4>Sample Calculator</h4></div>
@using (Html.BeginForm())
{
<p> @Html.Label("Input 1") : @Html.TextBox("num1","0")</p>
<p> @Html.Label("Input 2") : @Html.TextBox("num2", "0")</p>
<p> @Html.Label("Sum ") : @Html.TextBox("sum")</p>
<p> @Html.Label("Sub ") : @Html.TextBox("sub")</p>
<p> @Html.Label("Mult ") : @Html.TextBox("mul")</p>
<p> @Html.Label("Div ") : @Html.TextBox("div")</p>
<button id="my-calc" type="button">Calculate</button>
}
</body>
</html>
尝试
- 发出警报。未观察到。
- 从documents.on.ready()重写它。见下文。
- RTFM 如所见here
- 已搜索到 stackoverflow。没有找到任何有用的东西。
编辑：我最初有一些东西，就像我正在看的教程一样。我有：
$(document).ready(function(){
$('#my-calc').on('submit', function (){ //stuff}
}
我不明白为什么我的函数没有被调用？我的表单 ID 是正确的。我要做的就是调用这个计算器方法，以便我的标签的 sum、sub、mult 和 div 显示结果。
请原谅这个问题的简单性，但我觉得这对其他可能遇到此问题的 .NET MVC 教程的人很有用。由于这个问题， 我决定买一本关于 jQuery 的书。谢谢你的协助。
【问题讨论】：
-
尝试使用 onload 函数
$(function(){})或将脚本放在</body>之前 -
你这里的示例代码是行不通的，因为它没有在文档中准备好（或者不在页尾，干脆
'.my-calc'（应该是'#my-calc'反正）不存在当脚本运行时，因此不添加提交处理程序）。你说你重写了documents.on.ready() 但它没有用？你能提供那个代码吗？ -
您也真的不想将提交按钮放在它自己的子表单中。根据 HTML5 标准，您不要将表单放在表单中……这会使它们的提交行为变得异常。相反，您可能想要设置 Html.BeginForm() 的 ID。像这样：
using (Html.BeginForm(null, null, FormMethod.Post, new { id = "my-calc" })) -
@OJay 我按要求添加了代码 sn-p。
-
我给了每个人的支持。我很感激你给我的温柔帮助，一个初学者。我希望我能给每个人都回答这个问题。 Ojay 回答了这个问题，因为他是我工作的第一个解决方案。特别感谢您指出浏览器中的调试。如果你有什么想推荐的书。请告诉我。
标签： javascript c# jquery .net asp.net-mvc-4