提交后为什么我的用户输入字段不会重置？

Question

这是我的HTML代码：

<div class="searchcontainer">
  <input type="text" id="query" placeholder="Search for a recipe">
  <button id="submit" name="button">Search</button>
</div>

这是我的Jquery：

$("#submit").click( function() {
      // console.log("Submit button was clicked!");
      $('#query').val('');
      callAPI(getInput());
    });

即使我点击提交后，输入字段仍然保留文本。我希望它消失，只显示HTML代码中指定的占位符值。

Answer 1

您可以在表单上使用JS（而非jQuery）方法.reset()来重置其所有字段

$("#submit").click( function() {
  $(this).closest('form')[0].reset();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input placeholder="Enter text"/>
  <button type="button" id="submit">Reset</button>
</form>

Answer 2

您的代码正常运行......

请检查您的JQuery Library是否正确添加。

＆＃13;

＆＃13;

$("#submit").click( function() {
      // console.log("Submit button was clicked!");
      $('#query').val('');
      
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="searchcontainer">
  <input type="text" id="query" placeholder="Search for a recipe">
  <button id="submit" name="button">Search</button>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您的代码似乎完美无缺。 你在控制台中有任何错误吗？

另外，请检查您的浏览器是否缓存了旧版本的代码。