使用 jQuery 动态添加列表项：避免页面刷新的陷阱

技术教程
2025-11-16 08:02:26

使用 jquery 动态添加列表项：避免页面刷新的陷阱

本文旨在帮助开发者解决在使用 jQuery 向列表中动态添加列表项时，由于表单提交导致页面刷新的问题。我们将深入探讨问题的原因，并提供一种优雅的解决方案，即通过监听表单的 `submit` 事件并阻止默认行为，从而实现无刷新添加列表项的功能，提升用户体验。

在使用 jQuery 动态向 HTML 列表（

或

）时，一个常见的陷阱是由于按钮的默认行为导致页面刷新，从而使新添加的列表项瞬间消失。这通常发生在按钮位于
元素内部时。本文将详细介绍这个问题的原因，并提供一种可靠的解决方案。
问题根源：表单提交的默认行为

当

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

要解决这个问题，我们需要阻止表单的默认提交行为。这可以通过监听表单的 submit 事件，并在事件处理函数中调用 preventDefault() 方法来实现。preventDefault() 方法会阻止浏览器执行与该事件关联的默认操作，在本例中，就是阻止表单的提交和页面刷新。

代码示例
标贝AI虚拟主播
一站式虚拟主播视频生产和编辑平台
69 查看详情
以下是一个使用 jQuery 阻止表单提交并动态添加列表项的示例：
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<form>
  <input type="text" id="bill" />
  <button type="submit" class="btn btn-primary btn-success" id="h*eButton">H*e</button>
</form>
<div class="myNeed">
  <ul class="need">
  </ul>
</div>
```
```
jQuery($ => {
  $("form").on('submit', e => {
    e.preventDefault();
    var needed = $("#bill").val();
    $(".need").append(`<li>${needed}</li>`);
  });
});
```
代码解释
1. 选择器： $("form") 选择页面中的
  元素。
2. 事件监听： .on('submit', e => { ... }) 为选中的表单元素绑定 submit 事件的监听器。当表单被提交时，该监听器内的函数会被执行。
3. 阻止默认行为： e.preventDefault(); 阻止表单的默认提交行为，即阻止页面刷新。e 是事件对象，包含了关于事件的详细信息。
4. 获取输入值： var needed = $("#bill").val(); 获取 id 为 bill 的输入框的值，并将其存储在变量 needed 中。
5. 动态添加列表项： $(".need").append(\
6. ${needed}
7. 元素添加到class为need的
注意事项
- 确保引入 jQuery 库。
- preventDefault() 方法必须在事件处理函数中调用，才能有效地阻止默认行为。
- 使用模板字符串 (反引号 ``) 允许在字符串中直接嵌入变量，使代码更简洁易读。
总结

通过监听表单的 submit 事件并调用 preventDefault() 方法，我们可以有效地阻止表单的默认提交行为，从而避免页面刷新，并实现无刷新动态添加列表项的功能。这种方法不仅提升了用户体验，还使得代码更加清晰易懂。记住，理解 HTML 元素的默认行为是编写高效 J*aScript 代码的关键。