为什么简单的MVC教程没有调用我的javascript函数?为什么可以't我也调试

Why is my javascript function not being invoked for simple MVC tutorial? Why can't I debug either?

本文关键字：为什么 调试 函数 MVC 简单 教程 我的 调用 javascript      更新时间：2023-09-26

问题

我一直在遵循这里的这个简单教程。但是，我想修改它，使计算器只在客户端单击提交时调用。但是，当我单击提交按钮时，没有观察到任何操作。我甚至没有看到警报。

编辑：

我已经根据Ojay的建议修改了代码。但是，当我尝试调试时，会出现此错误。我得到这个确切的问题，除了我有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>

尝试

  • 保持警惕。未观察到
  • 从文档中重写。on。ready（）。见下文
  • 如图所示
  • 搜索stackoverflow。没有找到任何有效的方法

编辑：我有一些最初像我正在看的教程。我有：

    $(document).ready(function(){
  $('#my-calc').on('submit', function (){ //stuff}

    }

我不明白为什么我的函数没有被调用？我的表单id是正确的。我所要做的就是调用这个计算器方法，以便标签的sum、sub、mult和div显示结果。

请原谅这个问题过于简单，但我觉得这对其他可能也有这个问题的.NET MVC教程的人来说会很有用。作为这个问题的结果，我决定买一本关于jQuery的书。谢谢你的帮助。

在呈现表单之前，您正在运行代码。因此，$('.my-calc')返回一个空对象，而不执行任何操作。此外，ID为的项目的选择器是$('#my-calc')，您的选择器正在查找类为my-calc 的元素

// Passing a function into `$()` makes it run after the DOM is ready.
$(function() {
    $('#my-calc').on('submit', function (){
        alert("This button is working?");
        calculate();
    });
});

这里似乎有多个问题。

首先，您的选择器必须是'#my-calc'才能正确选择提交表单。您的jQuery代码必须包装在文档就绪处理程序中（根据您添加的代码），或者代码需要出现在表单之后。此外，当您添加提交事件处理程序时，您需要返回false以停止表单提交。最后（也许也是最重要的），你不能嵌套表单。@using (Html.BeginForm())创建了一个表单，然后您在其中创建另一个表单<form id="my-calc">，这是无效的。浏览器将忽略内部表单，因此换句话说，my-calc表单永远不会有提交事件，因为父表单就是提交的表单。

另外，因为您只是用JavaScript在页面上进行计算，所以实际上并不需要表单，也许只有<button type="button" id="my-calc">Calculate</button>会更好地使用单击事件。

现在你的计算函数也有错误

在尝试获得num1值时，每个计算行都缺少一个$

所以

$('#sum').val((parseInt(('#num1').val())) + parseInt($('#num2').val()));

应该是

$('#sum').val((parseInt($('#num1').val())) + parseInt($('#num2').val()));

乘法运算还有一个额外的问题，根据您的@Html.TextBox("mul")，输入不是#mult，而是#mul。

所以所有这些加在一起，像下面这样的东西应该可以解决你的问题

@{
    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('click', function () {
                calculate();
            });
            function calculate() {
                //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>
    <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>

对于jquery中的id，您必须使用#my-calc

但坦率地说，我认为你希望在点击按钮时调用calculate，否则你每次按下按钮都必须提交表单，这有点违背javascript的目的。

$("input").on("click", calculate);

http://jsfiddle.net/4pwakehm/

您的代码无法工作，因为您的Javascript中没有#。

  • #应位于名称前面，以表示Id
  • .应该在名称前面，以表示类

你基本上可以做：

$(document).ready(function () {
     $("#my-calc").on("click", function () {
          alert("Triggered alert for click.");
     });
});

请记住，$(document).ready使用jQuery。

例如，您还应该在浏览器中使用console来帮助调试Javascript。这将有助于解决此类问题。

相关文章：