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

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

` 或 `

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

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

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

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

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

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

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

   1. HTML 结构：

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

      元素。

      <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() 方法。然后，获取输入框的值，并将其添加到

      

      Motiff

      Motiff是由猿辅导旗下的一款界面设计工具，定位为“AI时代设计工具”

      148

      查看详情
      元素中。

      $(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("
      • " + needed + "
      ");：将新的列表项添加到
      元素中。
   3. $("#bill").val("");：清空输入框，方便用户输入下一个列表项。

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

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

   登录后复制

改进和注意事项：

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

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

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

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

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

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

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

  登录后复制

总结：

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

以上就是使用 jQuery 动态添加列表项并防止页面重定向的详细内容，更多请关注php中文网其它相关文章！