本文旨在解决使用 jQuery 动态向 HTML 列表 ( `
- ` 或 `
- `) 中添加列表项时，由于表单提交导致的页面刷新的问题。通过将事件处理程序绑定到表单的 `submit` 事件，并使用 `preventDefault()` 方法，可以有效阻止默认的表单提交行为，从而实现无刷新添加列表项的功能。
-
将事件处理程序绑定到表单的 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} `);：这行代码将包含输入值的新的列表项添加到 class 为need的
- ` 元素中。这里使用了模板字符串 (Template Literals) 来动态构建 HTML 字符串，这是一种更简洁和可读性更强的方式。
-
修改按钮的 type 属性：
可以将按钮的 type 属性从 submit 修改为 button。这样，点击按钮就不会触发表单的提交行为。
<button type="button" class="btn btn-primary" id="needButton">Need</button>
注意： 这种方法会禁用通过回车键提交表单的功能。
- 将代码复制到 HTML 文件中。
- 在输入框中输入文本。
- 点击 "添加" 按钮或按下回车键。
- 新的列表项将动态添加到列表中，而页面不会刷新。
动态添加列表项的常见问题
在使用 jQuery 向 HTML 列表动态添加列表项时，一个常见的问题是点击按钮后页面会刷新，导致新添加的列表项消失。这通常是由于按钮位于 <form> 元素中，并且按钮的 type 属性为 submit，导致点击按钮触发了表单的提交行为。表单提交会默认刷新页面，因此新添加的列表项在刷新后会丢失。
解决方案：阻止表单默认提交行为
要解决这个问题，我们需要阻止表单的默认提交行为。可以通过以下两种方法实现：
完整示例代码
以下是一个完整的示例代码，演示了如何使用 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>使用方法：
注意事项
- 确保引入了 jQuery 库。
- 确保选择器 (例如 $("#bill") 和 $(".need")) 正确地选择了目标元素。
- preventDefault() 方法只能阻止默认行为，不能阻止事件冒泡。如果需要阻止事件冒泡，可以使用 stopPropagation() 方法。
总结
通过将事件处理程序绑定到表单的 submit 事件，并使用 preventDefault() 方法，可以有效地阻止表单的默认提交行为，从而实现无刷新动态添加列表项的功能。这种方法不仅解决了页面刷新的问题，还提高了用户体验，允许用户通过点击按钮或按下回车键来添加列表项。 建议使用第一种方法，因为它保留了表单的默认行为，允许用户通过回车键提交表单。
