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

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

在使用 jQuery 动态向 HTML 列表（<ul> 或 <ol>) 中添加列表项（<li>）时，一个常见的陷阱是由于按钮的默认行为导致页面刷新，从而使新添加的列表项瞬间消失。这通常发生在按钮位于 <form> 元素内部时。本文将详细介绍这个问题的原因，并提供一种可靠的解决方案。

问题根源：表单提交的默认行为

当 <button> 元素的 type 属性为 submit (或未指定 type 属性，因为 submit 是默认值) 且位于 <form> 元素内部时，点击该按钮会触发表单的提交行为。默认情况下，表单提交会导致浏览器刷新页面，并将表单数据发送到服务器。这就是为什么使用 jQuery 添加的列表项会立即消失的原因：页面刷新后，之前通过 JavaScript 所做的修改都会丢失。

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

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

代码示例

爱图表

AI驱动的智能化图表创作平台

99

查看详情

以下是一个使用 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>`);
  });
});

代码解释

1. 选择器： $("form") 选择页面中的 <form> 元素。
2. 事件监听： .on('submit', e => { ... }) 为选中的表单元素绑定 submit 事件的监听器。当表单被提交时，该监听器内的函数会被执行。
3. 阻止默认行为： e.preventDefault(); 阻止表单的默认提交行为，即阻止页面刷新。e 是事件对象，包含了关于事件的详细信息。
4. 获取输入值： var needed = $("#bill").val(); 获取 id 为 bill 的输入框的值，并将其存储在变量 needed 中。
5. 动态添加列表项： $(".need").append(\
6. ${needed}
`);使用 jQuery 的append()方法，将包含输入值的新的
7. 元素添加到class为need的
   元素中。这里使用了模板字符串（template literals）来方便地将变量needed` 嵌入到 HTML 字符串中。

注意事项

• 确保引入 jQuery 库。
• preventDefault() 方法必须在事件处理函数中调用，才能有效地阻止默认行为。
• 使用模板字符串 (反引号 ``) 允许在字符串中直接嵌入变量，使代码更简洁易读。

总结

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

以上就是使用 jQuery 动态添加列表项：避免页面刷新的陷阱的详细内容，更多请关注php中文网其它相关文章！