追加不将项目添加到列表[重复]答案

【问题标题】：Append not adding item to list [duplicate]追加不将项目添加到列表[重复]
【发布时间】：2020-08-04 12:05:52
【问题描述】：

有一个简单的输入框和提交按钮来追加项目到列表。我有正确的 ID 和选择器。如何设置是您使用“click”功能单击，当它单击时会选择带有 id 选择器的 ul，然后使用 append 来添加项目，但没有出现。

$(document).ready(function() {
  $("#somebutton1").click(function() {
    $("#someul1").append("<li>Appended item</li>");
  });
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width" />
  <title>cfds</title>
  <link rel="stylesheet" href="img/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>

  <form id="someform1" name="someformname1">
    <input id="someinput1" type="text">
    <input id="somebutton1" type="submit">
  </form>

  <br><br>

  <div id="somediv1">
    <ul id="someul1">
      <li>coffee</li>
      <li>milk</li>
      <li>tea</li>
    </ul>
  </div>

  <br><br>

  <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
  <script src="img/popper.min.js"></script>
  <script src="img/bootstrap.min.js"></script>
</body>

</html>

【问题讨论】：

您不会阻止提交表单
确实如此，但这不是问题

标签： javascript html jquery

【解决方案1】：

问题是因为button 在form 中，单击它会提交该表单。要让 JS 按预期工作，您需要停止提交该表单，这可以通过使用 submit 事件处理程序并在引发的事件上调用 preventDefault() 来完成。

此外，您可以通过读取字段的val() 来附加键入的值。您也可以在附加值后清空该字段。试试这个：

jQuery($ => {
  let $input = $('#someinput1');

  $("#someform1").on('submit', function(e) {
    e.preventDefault();
    let value = $input.val().trim();
    if (value)
      $("#someul1").append(`<li>${value}</li>`);

    $input.val('');
  });
});

<form id="someform1" name="someformname1">
  <input id="someinput1" type="text">
  <input id="somebutton1" type="submit">
</form><br /><br />

<div id="somediv1">
  <ul id="someul1">
    <li>coffee</li>
    <li>milk</li>
    <li>tea</li>
  </ul>
</div><br /><br />

<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>

【讨论】：

谢谢你，但为什么你的和他们在 jquery 网站上的不同？您确定这是一种有效的方法吗？
@tk123 这是 jQuery 网站上的什么地方？
@tk123 没有看到这个例子很难知道你的意思，但这很可能是因为它使用了字符串插值和箭头函数，这些是比 jQuery 文档显示的更新的 JS 特性。