本文旨在解决使用 jQuery 动态向列表中添加项目时，由于表单提交导致的页面刷新问题。通过将事件处理程序绑定到表单的 `submit` 事件并调用 `preventDefault()` 方法，可以阻止默认的表单提交行为，从而实现无刷新添加列表项的功能。文章提供详细的代码示例，帮助开发者理解和应用该技术。
在使用 jQuery 动态地向 HTML 列表 ( <ul> 或 <ol>) 中添加项目时，一个常见的问题是点击按钮后页面会刷新，导致新添加的列表项消失。 这个问题通常发生在按钮位于 <form> 表单内时，因为按钮的默认行为是触发表单提交。本文将介绍如何使用 jQuery 阻止表单的默认提交行为，从而实现无刷新地动态添加列表项。
问题根源：表单提交的默认行为
当一个 <button> 元素 (尤其是 type="submit") 位于 <form> 内部时，点击该按钮会触发表单的提交。表单提交的默认行为是向服务器发送请求，并通常会导致页面刷新或重定向。 这就是为什么你在使用 jQuery 添加列表项后，页面会立即刷新，导致新添加的列表项消失的原因。
解决方案：阻止表单的默认提交行为
要解决这个问题，我们需要阻止表单的默认提交行为。 这可以通过以下两种方法实现：
- 将事件处理程序绑定到表单的 submit 事件，并调用 preventDefault() 方法。
- 更改 <button> 标签的 type 属性。
这里推荐第一种方法，因为它允许用户仍然可以通过在输入框中按回车键来触发添加列表项的操作，这是一种更友好的用户体验。
代码示例
以下是一个完整的代码示例，展示了如何使用 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="haveButton">Have</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>`);
});
});代码解释
- 引入 jQuery: 确保在 HTML 文件中引入 jQuery 库。
- HTML 结构: 创建一个包含输入框和提交按钮的表单。 还有一个用于显示列表项的 <ul> 元素。
-
jQuery 代码:
- $("form").on('submit', e => { ... });: 这行代码将一个事件处理程序绑定到表单的 submit 事件。 当表单尝试提交时，该处理程序将被执行。
- e.preventDefault();: 这行代码是关键。 它调用 preventDefault() 方法来阻止表单的默认提交行为。
- var needed = $("#bill").val();: 这行代码获取输入框中输入的值。
- $(".need").append(\
- ${needed} `);: 这行代码使用 jQuery 的append()方法将一个新的列表项添加到
- ` 元素中。
注意事项
- 确保在文档加载完成后执行 jQuery 代码。 可以将代码放在 $(document).ready() 函数中，或者像示例代码一样，使用简写的 jQuery($ => { ... });。
- 如果你的 HTML 结构与示例代码不同，请根据实际情况修改 jQuery 选择器。
- preventDefault() 方法只会阻止表单的默认提交行为。 如果你还有其他的事件处理程序，可能需要检查它们是否也需要阻止默认行为。
总结
通过将事件处理程序绑定到表单的 submit 事件并调用 preventDefault() 方法，我们可以有效地阻止表单的默认提交行为，从而实现无刷新地动态添加列表项的功能。 这种方法不仅可以提高用户体验，还可以避免不必要的服务器请求。 希望本文能够帮助你解决在使用 jQuery 动态添加列表项时遇到的问题。
