Jquery脚本可能不工作，所以我的按钮不起作用

Question

我正在使用Jquery创建一个MVC计算器。但是按钮不起作用，但是在我在文本框中输入并且单击“等于”按钮后，计算工作正常。这很奇怪。 “等于”按钮有效，但其他按钮无法使用。

这是我的控制器中的代码：

 public string GetResult(string str)
    {
        List<char> symbleList = new List<char>();
        char[] charSymble = { '+', '-', '*', '/' };
        string[] st = str.Split(charSymble);
        for (int i = 0; i < str.Length; i++)
        {
            if (str[i] == '+' || str[i] == '-' || str[i] == '*' || str[i] == '/')
            {
                symbleList.Add(str[i]);
            }
        }
        double result = Convert.ToDouble(st[0]);
        for (int i = 1; i < st.Length; i++)
        {
            double num = Convert.ToDouble(st[i]);
            int j = i - 1;
            switch (symbleList[j])
            {
                case '+':
                    result = result + num;
                    break;
                case '-':
                    result = result - num;
                    break;
                case '*':
                    result = result * num;
                    break;
                case '/':
                    result = result / num;
                    break;
                default:
                    result = 0.0;
                    break;
            }
        }
        return result.ToString();
    }
    public ActionResult Index()
    {
        if (Request["txt"] != null)
        {
            if (Request["txt"][Request["txt"].Length - 1] == '+' || Request["txt"][Request["txt"].Length - 1] == '-' || Request["txt"][Request["txt"].Length - 1] == '*' || Request["txt"][Request["txt"].Length - 1] == '/')
            {
                ViewBag.flag = 0;
                ViewBag.result = Request["txt"];
            }
            else
            {
                ViewBag.result = GetResult(Request["txt"]);
                ViewBag.flag = 1;
            }
        }
        return View();
    }

这是我的索引视图中的代码：

<script src="~jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
    $("#txt").keypress(function (e) {
        if (String.fromCharCode(e.keyCode).match(/[^0-9+-/*]/g)) return false;
    });
    $("#txt").height("40px").width("312px");
    $("#b0").click(function () {
        var x = document.getElementById("txt").value;
        if (x == "0") {
            $("#txt").val("0");
        } else {
            $("#txt").val(x + "0")
        }
    });
    $("#b1").click(function () {
        var x = document.getElementById("txt").value;
        if (x == "0") {
            $("#txt").val("1");
        } else {
            $("#txt").val(x + "1")
        }
    });
    $("#b2").click(function () {
        var x = document.getElementById("txt").value;
        if (x == "0") {
            $("#txt").val("2");
        } else {
            $("#txt").val(x + "2")
        }
    });
    $("#b3").click(function () {
        var x = document.getElementById("txt").value;
        if (x == "0") {
            $("#txt").val("3");
        } else {
            $("#txt").val(x + "3")
        }
    });
    $("#b4").click(function () {
        var x = document.getElementById("txt").value;
        if (x == "0") {
            $("#txt").val("4");
        } else {
            $("#txt").val(x + "4")
        }
    });
    $("#b5").click(function () {
        var x = document.getElementById("txt").value;
        if (x == "0") {
            $("#txt").val("5");
        } else {
            $("#txt").val(x + "5")
        }
    });
    $("#b6").click(function () {
        var x = document.getElementById("txt").value;
        if (x == "0") {
            $("#txt").val("6");
        } else {
            $("#txt").val(x + "6")
        }
    });
    $("#b7").click(function () {
        var x = document.getElementById("txt").value;
        if (x == "0") {
            $("#txt").val("7");
        } else {
            $("#txt").val(x + "7")
        }
    });
    $("#b8").click(function () {
        var x = document.getElementById("txt").value;
        if (x == "0") {
            $("#txt").val("8");
        } else {
            $("#txt").val(x + "8")
        }
    });
    $("#b9").click(function () {
        var x = document.getElementById("txt").value;
        if (x == "0") {
            $("#txt").val("9");
        } else {
            $("#txt").val(x + "9")
        }
    });
    $("#div").click(function () {
        var x = document.getElementById("txt").value;
        var y = x.slice(-1)
        if (y == "/" || y == "+" || y == "*" || y == "-") { } else {
            $("#txt").val(x + "/")
        }
    });
    $("#multy").click(function () {
        var x = document.getElementById("txt").value;
        var x = document.getElementById("txt").value;
        var y = x.slice(-1)
        if (y == "/" || y == "+" || y == "*" || y == "-") { } else {
            $("#txt").val(x + "*")
        }
    });
    $("#sub").click(function () {
        var x = document.getElementById("txt").value;
        var x = document.getElementById("txt").value;
        var x = document.getElementById("txt").value;
        var y = x.slice(-1)
        if (y == "/" || y == "+" || y == "*" || y == "-") { } else {
            $("#txt").val(x + "-")
        }
    });
    $("#add").click(function () {
        var x = document.getElementById("txt").value;
        var x = document.getElementById("txt").value;
        var x = document.getElementById("txt").value;
        var x = document.getElementById("txt").value;
        var y = x.slice(-1)
        if (y == "/" || y == "+" || y == "*" || y == "-") { } else {
            $("#txt").val(x + "+")
        }
    });
    $("#dot").click(function () {
        var x = document.getElementById("txt").value;
        var y = x.slice(-1)
        if (y == ".") { } else {
            $("#txt").val(x + ".")
        }
    });
    $("#ce").click(function () {
        var x = document.getElementById("txt").value;
        $("#txt").val(x.substring(0, x.length - 1))
    });
});
</script>
<style>
body {
    background-image: url("Image/images.jpg");
}

#d1 {
    border: 1px solid black;
    height: 340px;
    width: 340px;
}
</style>
<br /><br /><br /><br /><br /><br /><br />
<center>
<div id="d1">
@using (@Html.BeginForm("Index", "Home"))
    {
        <table style="height:25%;border:thick">
            <tr>
                <td colspan="4">
                    <center>
                        <h2>My Calculator</h2>
                    </center>
                </td>
            </tr>
            <tr>
                <td colspan="4">@Html.TextBox("txt", (string)ViewBag.result)</td>
            </tr>
            <tr>
                <td><input type="button" id="b7" value="7" style="height:40px;width:75px" /></td>
                <td><input type="button" id="b8" value="8" style="height:40px;width:75px" /></td>
                <td><input type="button" id="b9" value="9" style="height:40px;width:75px" /></td>
                <td><input type="button" id="div" value="/" style="height:40px;width:75px" /></td>
            </tr>
            <tr>
                <td><input type="button" id="b4" value="4" style="height:40px;width:75px" /></td>
                <td><input type="button" id="b5" value="5" style="height:40px;width:75px" /></td>
                <td><input type="button" id="b6" value="6" style="height:40px;width:75px" /></td>
                <td><input type="button" id="multy" value="*" style="height:40px;width:75px" /></td>
            </tr>
            <tr>
                <td><input type="button" id="b1" value="1" style="height:40px;width:75px" /></td>
                <td><input type="button" id="b2" value="2" style="height:40px;width:75px" /></td>
                <td><input type="button" id="b3" value="3" style="height:40px;width:75px" /></td>
                <td><input type="button" id="sub" value="-" style="height:40px;width:75px" /></td>
            </tr>
            <tr>
                <td><input type="button" id="b0" value="0" style="height:40px;width:75px" /></td>
                <td><input type="button" id="dot" value="." style="height:40px;width:75px" /></td>
                <td><input type="button" id="add" value="+" style="height:40px;width:75px" /></td>
                <td><input type="submit" id="eq" value="=" style="height:40px;width:75px" /></td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" id="ce" value="CE" style="height:40px;width:155px" />
                </td>
                <td colspan="2">
                    <input type="reset" id="re" value="Clear" style="height:40px;width:155px" />
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    <center>
                        <h2>Result : @ViewBag.result</h2>
                    </center>
                </td>
            </tr>
        </table>
    }
</div>
</center>

这是计算器的图片： https://imgur.com/a/HT35e

没有错误消息，我的调试模式已打开。

它运行顺利，但按钮不起作用。

Answer 1

这是因为您在BeginForm中包含了所有按钮。表单中input type="button"的默认行为是submitting表单。

因此，每次点击按钮时，您都会提交表单，而click处理程序将被忽略。

您应该在每个e.preventDefault();处理程序的开头调用click并声明每个click处理程序：

$("#b8").click(function (e) {
    e.preventDefault();
    // code of your handler
});