本文旨在帮助开发者解决在使用 jQuery 向列表中动态添加列表项时，由于表单提交导致页面刷新的问题。我们将深入探讨问题的原因，并提供一种优雅的解决方案，即通过监听表单的 `submit` 事件并阻止默认行为，从而实现无刷新添加列表项的功能，提升用户体验。
在使用 jQuery 动态向 HTML 列表（<ul> 或 <ol>) 中添加列表项（<li>）时，一个常见的陷阱是由于按钮的默认行为导致页面刷新，从而使新添加的列表项瞬间消失。这通常发生在按钮位于 <form> 元素内部时。本文将详细介绍这个问题的原因，并提供一种可靠的解决方案。
问题根源：表单提交的默认行为
当 <button> 元素的 type 属性为 submit (或未指定 type 属性，因为 submit 是默认值) 且位于 <form> 元素内部时，点击该按钮会触发表单的提交行为。默认情况下，表单提交会导致浏览器刷新页面，并将表单数据发送到服务器。这就是为什么使用 jQuery 添加的列表项会立即消失的原因：页面刷新后，之前通过 JavaScript 所做的修改都会丢失。
解决方案：阻止表单的默认提交行为
要解决这个问题，我们需要阻止表单的默认提交行为。这可以通过监听表单的 submit 事件，并在事件处理函数中调用 preventDefault() 方法来实现。preventDefault() 方法会阻止浏览器执行与该事件关联的默认操作，在本例中，就是阻止表单的提交和页面刷新。
代码示例
以下是一个使用 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>`);
});
});代码解释
- 选择器： $("form") 选择页面中的 <form> 元素。
- 事件监听： .on('submit', e => { ... }) 为选中的表单元素绑定 submit 事件的监听器。当表单被提交时，该监听器内的函数会被执行。
- 阻止默认行为： e.preventDefault(); 阻止表单的默认提交行为，即阻止页面刷新。e 是事件对象，包含了关于事件的详细信息。
- 获取输入值： var needed = $("#bill").val(); 获取 id 为 bill 的输入框的值，并将其存储在变量 needed 中。
- 动态添加列表项： $(".need").append(\
- ${needed} `);使用 jQuery 的append()方法，将包含输入值的新的
- 元素添加到class为need的
- 元素中。这里使用了模板字符串（template literals）来方便地将变量needed` 嵌入到 HTML 字符串中。
注意事项
- 确保引入 jQuery 库。
- preventDefault() 方法必须在事件处理函数中调用，才能有效地阻止默认行为。
- 使用模板字符串 (反引号 ``) 允许在字符串中直接嵌入变量，使代码更简洁易读。
总结
通过监听表单的 submit 事件并调用 preventDefault() 方法，我们可以有效地阻止表单的默认提交行为，从而避免页面刷新，并实现无刷新动态添加列表项的功能。这种方法不仅提升了用户体验，还使得代码更加清晰易懂。记住，理解 HTML 元素的默认行为是编写高效 JavaScript 代码的关键。
