jQuery无法正常工作。当我单击表单上的提交按钮时，没有任何反应

Question

我正在尝试为数字游戏创建网页，但是我无法使jQuery正常工作。 我很确定我的所有展示位置都在正确的位置，但是当我单击“提交”按钮时没有任何反应。 请帮忙！

编辑：我还添加了我的JavaScript代码，以使其更容易理解我正在尝试做的事情。

我的HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/scripts.js"></script>
    <title>Ping-Pong</title>
  </head>
  <body>
    <div class="container">
      <h1>The Ping Pong Game!</h1>
      <div>
        <form id="digit">
          <div class="form-group">
            <label for="input">Type in a number:</label>
            <input id="number" class="form-control" type="text">
          </div>

          <button type="submit" class="btn" id="submit">Submit</button>
        </form>

        <div id="output"><p>Thanks for playing!</p>
          <ul id="list">

          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

我的JQUERY代码：

$(document).ready(function() {
    $("#digit").submit(function(event) {
      event.preventDefault();

      var userInput = $("#number").val();
      $("#submit").click(function () {
        $("#output").append(input(userInput));
        toggle();
      });
    });
  });

Answer 1

您无需在“提交”按钮上设置侦听器。 您的提交侦听器正在完成这项工作。

不需要input（）函数。 我认为这是您想要得到的：

 $(document).ready(function() { $("#digitreplacer").submit(function(event) { event.preventDefault(); var userInput = $("#number").val(); $("#output #list").append("<li>"+userInput+"</li>"); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <title>Beep-Boop</title> </head> <body> <div class="container"> <h1>The Number Game!</h1> <div> <form id="digitreplacer"> <div class="form-group"> <label for="input">Type in a number:</label> <input id="number" class="form-control" type="text"> </div> <button type="submit" class="btn" id="submit">Submit</button> </form> <div id="output"><p>Thanks for playing!</p> <ul id="list"> </ul> </div> </div> </div> </body> </html>

另外toggle（）在做什么？

这是一个Codepen演示： https ://codepen.io/andreds/pen/GyzOKo

Answer 2

这是您想要得到的。

 $(document).ready(function() { var userInput; $("#submit").click(function () { userInput = $("#number").val(); $("#list").append("<li>" + userInput + "</li>"); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="css/styles.css" rel="stylesheet" type="text/css"> <script src="js/jquery-3.2.1.js"></script> <script src="js/scripts.js"></script> <title>Beep-Boop</title> </head> <body> <div class="container"> <h1>The Number Game!</h1> <div> <div class="form-group"> <label for="input">Type in a number:</label> <input id="number" class="form-control" type="text"> </div> <button class="btn" id="submit">Submit</button> <div id="output"><p>Thanks for playing!</p> <ul id="list"> </ul> </div> </div> </div> </body> </html>

jQuery无法正常工作。当我单击表单上的提交按钮时，没有任何反应

问题描述

2 个解决方案

解决方案1
0 2018-01-20 21:43:50

解决方案2
0 2018-01-20 21:46:09

jQuery无法正常工作。 当我单击表单上的提交按钮时，没有任何反应

问题描述

2 个解决方案

解决方案1 0 2018-01-20 21:43:50

解决方案2 0 2018-01-20 21:46:09

jQuery无法正常工作。当我单击表单上的提交按钮时，没有任何反应

解决方案1
0 2018-01-20 21:43:50

解决方案2
0 2018-01-20 21:46:09