Question

我正在尝试创建一个待办事项列表。当我打开html文件（我正在使用谷歌浏览器）时，似乎有两个问题：

按钮似乎不是按钮，因为它没有单击。
当我按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

给id按钮提供的内容不会成为按钮。也许你应该尝试：<button id="button>Add!</button>
当您按Enter键时，您正在提交表单，因为您没有任何javascript拦截其重新加载页面的表单的onSubmit事件。

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

Answer 2

好的，我在这里看到一些问题。首先，div不是按钮。我的意思是你可以做造型让它看起来像一个按钮，但为什么不使用：

<button type="button"> Add </button>

此外，您可以使用onclick而不是定义该click事件。我发现这通常比较干净：

<button type="button" onclick="the_function();"> Add </button>

然后在你的javascript中定义函数：

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

但是，你最好在输入上输入一个id：

<input type="text" id="check-list-input" name="checkListItem"/>

显然，您不需要使用该命名约定。完成后，您可以将该功能修改为：

function the_function()
{
    var toAdd = $('#check-list-input').val();
    $('.list').append("<div class='item'>" + toAdd + "</div>");
});

但是这仍然没有它应该的那么好。该列表也应该是id而不是类。如果页面上有多个列表，则会导致问题。而是这样做：

<div class="list" id="list-div"></div>

然后你可以将你的功能修改为：

function the_function()
{
    var toAdd = $('#check-list-input').val();
    $('#list-div').append("<div class='item'>" + toAdd + "</div>");
});

所以最终结果应该是：

<!DOCTYPE html>
<html>
    <head>
        <title>To Do</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <script type="text/javascript" src="script.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    </head>
    <body>
        <h2>To Do</h2>
        <form name="checkListForm">
            <input type="text" id="check-list-input" name="checkListItem"/>
        </form>
        <button type="button" onclick="the_function();"> Add </button>
        <br/>
        <div class="list" id="list-div"></div>
    </body>
</html>

并且对于你的jQuery（不再需要文档就绪，只需确保在html之前包含javascript文件或代码段）：

function the_function()
{
    var toAdd = $('#check-list-input').val();
    $('#list-div').append("<div class='item'>" + toAdd + "</div>");
});

我还没有测试过，但我希望它对你有用。

如何附加用户输入？ jQuery的

2 个答案: