使用 jQuery 动态添加列表项并避免页面刷新-html教程-PHP中文网

使用 jQuery 动态添加列表项并避免页面刷新

花韻仙語

发布： 2025-11-18 12:10:39

原创

865人浏览过

使用 jquery 动态添加列表项并避免页面刷新

本文旨在解决使用 jQuery 动态向 HTML 列表 ( `

` 或 `

表单提交

动态添加列表项的常见问题

在使用 jQuery 向 HTML 列表动态添加列表项时，一个常见的问题是点击按钮后页面会刷新，导致新添加的列表项消失。这通常是由于按钮位于 <form> 元素中，并且按钮的 type 属性为 submit，导致点击按钮触发了表单的提交行为。表单提交会默认刷新页面，因此新添加的列表项在刷新后会丢失。

解决方案：阻止表单默认提交行为

要解决这个问题，我们需要阻止表单的默认提交行为。可以通过以下两种方法实现：

将事件处理程序绑定到表单的 submit 事件：

这是推荐的方法，因为它允许用户仍然可以通过按下回车键来触发添加列表项的操作，提高了用户体验。
```
jQuery($ => {
  $("form").on('submit', e => {
    e.preventDefault(); // 阻止表单默认提交行为
    var needed = $("#bill").val();
    $(".need").append(`<li>${needed}</li>`);
  });
});
```
登录后复制
代码解释：
- $("form").on('submit', e => { ... });：这段代码选择所有的 <form> 元素，并为它们的 submit 事件绑定一个处理函数。
- e.preventDefault();：这行代码是关键。它阻止了表单的默认提交行为，即阻止了页面刷新。
- var needed = $("#bill").val();：这行代码获取 id 为 bill 的输入框的值，并将其存储在变量 needed 中。
- $(".need").append(\
- ${needed}
修改按钮的 type 属性：

爱图表
AI驱动的智能化图表创作平台

99

查看详情

可以将按钮的 type 属性从 submit 修改为 button。这样，点击按钮就不会触发表单的提交行为。
```
<button type="button" class="btn btn-primary" id="needButton">Need</button>
```
登录后复制
注意： 这种方法会禁用通过回车键提交表单的功能。

完整示例代码

以下是一个完整的示例代码，演示了如何使用 jQuery 动态添加列表项并避免页面刷新：

<!DOCTYPE html>
<html>
<head>
  <title>动态添加列表项</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>

<form>
  <input type="text" id="bill" />
  <button type="submit" class="btn btn-primary btn-success" id="haveButton">添加</button>
</form>

<div class="myNeed">
  <ul class="need">
  </ul>
</div>

<script>
jQuery($ => {
  $("form").on('submit', e => {
    e.preventDefault();
    var needed = $("#bill").val();
    $(".need").append(`<li>${needed}</li>`);
  });
});
</script>

</body>
</html>

登录后复制

使用方法：

将代码复制到 HTML 文件中。
在输入框中输入文本。
点击 "添加" 按钮或按下回车键。
新的列表项将动态添加到列表中，而页面不会刷新。

注意事项

确保引入了 jQuery 库。
确保选择器 (例如 $("#bill") 和 $(".need")) 正确地选择了目标元素。
preventDefault() 方法只能阻止默认行为，不能阻止事件冒泡。如果需要阻止事件冒泡，可以使用 stopPropagation() 方法。

总结

通过将事件处理程序绑定到表单的 submit 事件，并使用 preventDefault() 方法，可以有效地阻止表单的默认提交行为，从而实现无刷新动态添加列表项的功能。这种方法不仅解决了页面刷新的问题，还提高了用户体验，允许用户通过点击按钮或按下回车键来添加列表项。建议使用第一种方法，因为它保留了表单的默认行为，允许用户通过回车键提交表单。

以上就是使用 jQuery 动态添加列表项并避免页面刷新的详细内容，更多请关注php中文网其它相关文章！