Question

代码不按书面形式运行。如果按钮单击部件（第一个警报后的3行）被删除它可以正常工作。似乎对JS / JQ区域进行的任何编辑都会导致问题。这里可能出现什么问题？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Problem #2</title>
        <link rel="stylesheet" href="css/style.css">

        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <h1>Problem #2:</h1>

        <form>
            <input type="number" placeholder="Enter your cents" min="0" />
            <input type="button" name="Solve" value="Solve" />
        </form>
        <div id="answer">
            <div id="quarters"></div>
            <div id="dimes"></div>
            <div id="nickels"></div>
            <div id="pennies"></div>
        </div>
        <script src="js/jquery-2.0.3.min.js"></script>
        <script>
            $( document ).ready(function() {
                alert("Handler for .ready() called.");
                $('button').click(function{
                    alert("Hello World");
                });
            });

        </script>

    </body>
</html>

Answer 1

这有语法错误：

$('button').click(function{
      alert("Hello World");
});

并且需要这个（缺少的parens）：

$('button').click(function () {
      alert("Hello World");
});

将来，您应该查看调试控制台，它会告诉您语法错误在哪一行，并且通常会让您知道错误是什么。您还可以通过jsHint运行代码（只需粘贴相关代码），它通常会为您提供有关语法错误或可疑的详细信息。

此外，由于您的HTML中没有任何<button>个标记，因此您的选择器也可能出错。如果您要定位解决按钮，那么您应该更改HTML，如下所示：

<input id="solve" type="button" name="Solve" value="Solve" />

和您的HTML一样：

$('#solve').click(function () {
      alert("Hello World");
});

Answer 2

您在脚本第三行的function后缺少括号。

此外，正如评论中的@ArtOfCode所说，您的选择器应为input[type=button]。

它应该是这样的：

$('input[type=button]').click(function () {

编辑JQuery文档的问题

2 个答案: