我在将文本输入附加到 <li> html 中的空白时遇到问题<ul>

Question

我的最终目标是将用户提交的任何输入附加到页面的空白ul。附加项目后，我希望文本输入的值返回到空白文本框。 尝试创建待办事项列表。我的控制台上没有收到错误，所以我不确定我做错了什么！这是我的 HTML：

<div class="list">
    <h1>To Do List</h1>
<form>
<label> Things to Do:
<input id="item" type="text" name="item" placeholder="Items" />
<input id="submit" type="submit" value="Add to List"/></label>
</form>
<ul>
</ul>
<button id="clear">Clear List</button>
<button id="completed">Clear Completed Items</button>
</div>

这是我的JavaScript：

    $(document).ready(function(){
//this appends the input inside on an li inside the ul we created in the html
$("form").submit(function(event){
  e.preventDefault();
$("ul").append("<li>" + $("#item")[0].value + "</li>");
$("#item") [0].value="";
});

当我尝试这样做时，我注意到该值保存在 url 中，但没有附加到 ul。

Answer 1

问题是您正在通过表单处理程序传递event事件，但试图阻止使用 e 提交。这两个处理程序需要具有相同的名称。只需更新函数以传递e而不是event即可解决此问题：

$(document).ready(function() {
  //this appends the input inside on an li inside the ul we created in the html
  $("form").submit(function(e) {
    e.preventDefault();
    $("ul").append("<li>" + $("#item")[0].value + "</li>");
    $("#item")[0].value = "";
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <h1>To Do List</h1>
  <form>
    <label> Things to Do:
<input id="item" type="text" name="item" placeholder="Items" />
<input id="submit" type="submit" value="Add to List"/></label>
  </form>
  <ul>
  </ul>
  <button id="clear">Clear List</button>
  <button id="completed">Clear Completed Items</button>
</div>

希望这有帮助！ :)