Question

具有一个简单的输入框和提交按钮以将项目追加到列表中。我有正确的ID和选择器。设置方法是单击“单击”功能单击，然后单击以选择带有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>

Answer 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>

追加不添加项目到列表

1 个答案: