使用 jQuery 动态添加列表项并防止页面重定向

本文介绍如何使用 jQuery 动态地向 HTML 列表（`

` 或 `

`) 中添加新的列表项（`
1. `)。我们将解决一个常见的问题：点击按钮后，列表项虽然添加了，但立即消失，原因是表单提交导致页面重定向。通过监听表单的 `submit` 事件并阻止默认行为，我们可以有效地解决这个问题，并提供可访问性更好的解决方案。

   在 Web 开发中，动态地更新页面内容是常见的需求。使用 jQuery，我们可以轻松地向 HTML 列表添加新的列表项。然而，当列表项的添加与表单提交相关联时，可能会遇到一个问题：列表项短暂出现后立即消失。这是因为表单的默认行为是提交数据并刷新页面。本文将介绍如何使用 jQuery 解决这个问题，并提供一个更健壮和用户友好的解决方案。

   问题分析：表单提交导致页面重定向

   当点击 按钮时，浏览器会触发表单的提交事件。默认情况下，表单提交会导致页面重新加载或跳转到服务器指定的 URL。这就是为什么我们添加的列表项会短暂显示然后消失的原因。

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

   要解决这个问题，我们需要阻止表单的默认提交行为。这可以通过监听表单的 submit 事件，并调用 event.preventDefault() 方法来实现。

   以下是具体的步骤和代码示例：

   1. HTML 结构：

      首先，确保你的 HTML 结构包含一个表单、一个输入框和一个用于显示列表项的

      元素。

      
        
        添加
      
      
        
      
        
      

   2. jQuery 代码：

      使用 jQuery 监听表单的 submit 事件，并在事件处理函数中调用 preventDefault() 方法。然后，获取输入框的值，并将其添加到

      元素中。

      $(document).ready(function() {
        $("form").on('submit', function(e) {
          e.preventDefault(); // 阻止表单的默认提交行为
          var needed = $("#bill").val();
          if (needed) { // 检查输入框是否为空
            $(".need").append("
      " + needed + "
      ");
            $("#bill").val(""); // 清空输入框
          }
        });
      });

      代码解释：

      • $(document).ready(function() { ... });：确保在 DOM 加载完成后执行 jQuery 代码。
      • $("form").on('submit', function(e) { ... });：监听表单的 submit 事件。
      • e.preventDefault();：阻止表单的默认提交行为，防止页面重定向。
      • var needed = $("#bill").val();：获取输入框的值。
      • $(".need").append("
      • " + needed + "
      ");：将新的列表项添加到
      元素中。
   3. $("#bill").val("");：清空输入框，方便用户输入下一个列表项。

2. 引入 jQuery: 确保在HTML文件中引入 jQuery 库。可以使用 CDN 链接：

改进和注意事项：

• 输入验证： 在将输入添加到列表之前，进行输入验证是一个好习惯。例如，可以检查输入是否为空，或者是否符合特定的格式要求。

• 错误处理： 如果在添加列表项的过程中发生错误，应该适当地处理这些错误，并向用户提供反馈。

• 用户体验： 为了提高用户体验，可以添加一些动画效果，例如在添加列表项时使用淡入效果。

• 可访问性： 确保你的代码具有良好的可访问性。例如，为

  元素添加 aria-live 属性，以便屏幕阅读器可以及时通知用户列表项已更新。

• 使用模板字符串 (Template Literals): 为了更简洁的代码，可以使用 ES6 的模板字符串来构建 HTML 字符串。

  $(".need").append(`
  ${needed}
  `);

总结：

通过监听表单的 submit 事件并阻止默认行为，我们可以有效地解决点击按钮后列表项消失的问题。 这种方法不仅可以防止页面重定向，还可以提供更好的用户体验。 此外，请记住进行输入验证、错误处理和考虑可访问性，以确保你的代码健壮且易于使用。