为什么简单的MVC教程未调用我的javascript函数？为什么我也不能调试？

Question

问题

我一直在关注这里找到的这个简单教程。 但是，我想对其进行修改，以便仅在客户端单击“提交”时才调用计算器。 但是，当我单击“提交”按钮时，没有观察到动作。 我什至没有看到警报。

编辑：

我已经按照Ojay的建议修改了代码。 但是，尝试调试时出现此错误。 除了VS13 Update 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所看到这里
搜索堆栈溢出。 找不到任何有效的方法。

编辑：我原来有一些东西就像我正在看的教程。 我有：

    $(document).ready(function(){

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


    }

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

请原谅这个问题的简单性，但是我认为这对于其他从事.NET MVC教程的人也可能会遇到此问题很有用。 由于这个问题，我决定购买一本有关jQuery的书。 谢谢你的协助。

Answer 1

在呈现表单之前，您正在运行代码。 因此， $('.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();
    });
});

Answer 2

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

但是坦率地说，我想您希望在按钮单击时调用计算，否则每次单击按钮都必须提交表单，这有点违反了javascript的目的。

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

http://jsfiddle.net/4pwakehm/

Answer 3

似乎这里有多个问题。

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

另外，因为您只是使用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>

Answer 4

您的代码无效，因为您的Javascript中没有# 。

#应该在名称前面，代表一个ID 。
的. 应该在名称前面，代表一个类。

您基本上可以做：

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

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

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

为什么简单的MVC教程未调用我的javascript函数？为什么我也不能调试？

问题描述

问题

码

尝试次数

4 个解决方案

解决方案1
4 2014-10-06 20:10:07

解决方案2
3 2014-10-06 20:10:21

解决方案3
3 已采纳 2014-10-06 20:51:44

解决方案4
1 2014-10-06 20:14:12

为什么简单的MVC教程未调用我的javascript函数？ 为什么我也不能调试？

问题描述

问题

码

尝试次数

4 个解决方案

解决方案1 4 2014-10-06 20:10:07

解决方案2 3 2014-10-06 20:10:21

解决方案3 3 已采纳 2014-10-06 20:51:44

解决方案4 1 2014-10-06 20:14:12

为什么简单的MVC教程未调用我的javascript函数？为什么我也不能调试？

解决方案1
4 2014-10-06 20:10:07

解决方案2
3 2014-10-06 20:10:21

解决方案3
3 已采纳 2014-10-06 20:51:44

解决方案4
1 2014-10-06 20:14:12