javascript - 如何附加用户输入？查询

Question

我正在尝试创建待办事项列表。当我打开 html 文件时(我使用的是 Google Chrome)，似乎有两个问题:

1. 这个按钮看起来不像是一个按钮，因为它没有点击。
2. 当我按下 enter 而不是尝试单击添加按钮时，文本就消失了。

但在这两种情况下，两种方法都不会附加用户输入。我需要修复什么？

我有以下内容:

$(document).ready(function() {
  $('#button').click(function() {
    var toAdd = $('input[name=checkListItem]').val();
    $('.list').append("<div class='item'>" + toAdd + "</div>");
  });
});

h2 {
  font-family: arial;
}
form {
  display: inline-block;
}
#button {
  display: inline-block;
  height: 20px;
  width: 70px;
  background-color: #cc0000;
  font-family: arial;
  font-weight: bold;
  color: #ffffff;
  border-radius: 5px;
  text-align: center;
  margin-top: 2px;
}
.list {
  font-family: garamond;
  color: #cc0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<h2>To Do</h2>
<form name="checkListForm">
  <input type="text" name="checkListItem" />
</form>
<div id="button">Add!</div>
<br/>
<div class="list"></div>

Answer 1

1. 给某物 id按钮不会使其成为按钮。也许你应该尝试:<button id="button>Add!</button>
2. 当您按回车键时，您正在提交表单，因为您没有任何 javascript 拦截 onSubmit它重新加载页面的表单事件。

如果您希望在用户按下 Enter 时执行此操作，则应将按钮移到表单内并将事件更改为 $('form[name="checkListForm"]').on('submit', ...)