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

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

` 或 `

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

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

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

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

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

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

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

   1. HTML 结构：

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

      <form>
        <input type="text" id="bill" placeholder="输入内容"/>
        <button type="submit" class="btn btn-primary btn-success" id="haveButton">添加</button>
      </form>
      <div class="myNeed">
        <ul class="need">
        </ul>
      </div>

   2. jQuery 代码：

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

      

      OmniAudio

      OmniAudio 是一款通过 AI 支持将网页、Word 文档、Gmail 内容、文本片段、视频音频文件都转换为音频播客，并生成可在常见 Podcast ap

      下载

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

      代码解释：

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

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

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

   改进和注意事项：

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

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

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

   • 可访问性： 确保你的代码具有良好的可访问性。例如，为 <ul> 元素添加 aria-live 属性，以便屏幕阅读器可以及时通知用户列表项已更新。

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

     $(".need").append(`<li>${needed}</li>`);

   总结：

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