使用 jQuery 动态添加列表项并避免页面刷新_寅奏圩（云南）信息咨询有限公司

分类

当前所在位置：首页 > 新闻动态 > 网络学院

使用 jQuery 动态添加列表项并避免页面刷新2025-11-18 12:10:39

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

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

` 或 `

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

在使用 jQuery 向 HTML 列表动态添加列表项时，一个常见的问题是点击按钮后页面会刷新，导致新添加的列表项消失。这通常是由于按钮位于

元素中，并且按钮的 type 属性为 submit，导致点击按钮触发了表单的提交行为。表单提交会默认刷新页面，因此新添加的列表项在刷新后会丢失。

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

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

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

这是推荐的方法，因为它允许用户仍然可以通过按下回车键来触发添加列表项的操作，提高了用户体验。
```
jQuery($ => {
  $("form").on('submit', e => {
    e.preventDefault(); // 阻止表单默认提交行为
    var needed = $("#bill").val();
    $(".need").append(`<li>${needed}</li>`);
  });
});
```
代码解释：
- $("form").on('submit', e => { ... });：这段代码选择所有的元素，并为它们的 submit 事件绑定一个处理函数。
- e.preventDefault();：这行代码是关键。它阻止了表单的默认提交行为，即阻止了页面刷新。
- var needed = $("#bill").val();：这行代码获取 id 为 bill 的输入框的值，并将其存储在变量 needed 中。
- $(".need").append(\
- ${needed}
修改按钮的 type 属性：
ChatCut
AI视频剪辑工具
1086 查看详情
可以将按钮的 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="h*eButton">添加</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 动态添加列表项并避免页面刷新的详细内容，更多请关注其它相关文章！

# 可以通过 # b站有没有网站推广 # seo发布标准是什么 # 免费网站建设入门知识 # 找个优化网站有没有 # 营销推广平台就找a火11星 # 律师网站建设大概费用 # 四川推广营销软文 # 网站建设有什么 # 尤溪网站小程序建设 # 营销策划推广是做什么的 # 是一个 # 或按 # 选择器 # 因为它 # jquery # 这行 # 输入框 # 绑定 # 回车键 # 表单 # 表单提交 # 常见问题 # cdn # 事件冒泡 # app # ajax # js # html

相关栏目：【企业资讯168 】【行业动态20933 】【网络营销52431 】【网络学院91036 】【运营推广7012 】【科技资讯60970 】

分享到：

上一篇：如何使用CSS实现按钮hover过渡_effect与过渡效果结合

下一篇：解决CSS浮动布局导致元素错位问题：现代化布局实践

快速导航×

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

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

完整示例代码

注意事项

总结