Bootstrap 4 工具提示在 jquery-pjax AJAX 调用后停止工作

Ajax

# 使用Bootstrap 4工具提示在jquery-pjax Ajax调用后停止工作的解决方案

在Web开发中，使用Bootstrap 4的工具提示（Tooltip）是一种常见的方式来提供用户友好的交互体验。然而，当我们将工具提示应用于使用jquery-pjax进行的Ajax调用时，有时会遇到工具提示停止工作的问题。本文将介绍这个问题的解决方案，并提供一个简单的案例代码，帮助开发者更好地理解如何解决这个挑战。

## 问题背景

jquery-pjax是一个用于实现无刷新页面加载的库，它通过Ajax请求仅更新页面的一部分，而不是整个页面。在使用jquery-pjax的过程中，一些特定的DOM元素可能会失去绑定的事件或属性，这也包括Bootstrap 4工具提示。

## 解决方案

为了解决这个问题，我们需要在pjax的pjax:end事件中重新初始化工具提示。这样，每当pjax请求完成时，我们都可以确保工具提示得到正确的初始化，不再出现停止工作的情况。

html
<!DOCTYPE html>
<html lang="en">
<head>
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/CSS/bootstrap.min.CSS">
  <title>Tooltip Issue Solution</title>
</head>
<body>
  <!-- Your content goes here -->
  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Example Tooltip">Hover me</button>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.JS"></script>
  <script src="https://cdn.JSdelivr.net/npm/@tjcrowder/pjax@2.0.1/dist/pjax.min.JS"></script>
  <script src="https://cdn.JSdelivr.net/npm/@popperJS/core@2.0.7/dist/umd/popper.min.JS"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/JS/bootstrap.min.JS"></script>
  <script>
    // Initialize tooltips on document ready
    $(document).ready(function(){
      $('[data-toggle="tooltip"]').tooltip();
    });
    // Reinitialize tooltips after pjax:end event
    $(document).on('pjax:end', function() {
      $('[data-toggle="tooltip"]').tooltip();
    });
  </script>
</body>
</html>

在这个简单的例子中，我们在页面加载时初始化了工具提示。然后，通过监听pjax的pjax:end事件，我们在每次pjax请求完成时重新初始化工具提示，确保其正常工作。

##

通过在pjax请求完成后重新初始化工具提示，我们可以解决Bootstrap 4工具提示在jquery-pjax Ajax调用后停止工作的问题。这个简单的解决方案确保了良好的用户体验，使工具提示在页面刷新时仍然可用。希望本文对解决类似问题的开发者们提供了有价值的指导。