主页 / coding / 问题 / 78573510
Accepted
Yaroslav Demchenko
Asked: 2024-06-04 13:24:37 +0800 CST

Bootstrap 弹出窗口不弹出

  • 772

我使用 XMLHttpRequest 从 jsonplaceholder 进行简单的渲染用户。我想为每个用户做弹出窗口。该弹出窗口将显示用户名、电子邮件、电话、网站。我不知道这是否可以称为错误。因为控制台不会显示任何错误，并且弹出窗口有时会起作用，但大多数情况下不会。没有可见的错误。我按照引导程序说明做所有事情。我将在下面发布代码。

我的 AJAX.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
    <title>AJAX</title>
  </head>
  <body>
    <h1>AJAX</h1>
    <button class="btn button btn-primary get-users-btn">Get Users</button>
    <div class="container"></div>
    <script src="AJAX.js"></script>
    <script src="renderUsers.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
      integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
      integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
      crossorigin="anonymous"
    ></script>
    <script>
      const popoverTriggerList = document.querySelectorAll(
        '[data-bs-toggle="popover"]'
      );
      const popoverList = [...popoverTriggerList].map(
        (popoverTriggerEl) => new bootstrap.Popover(popoverTriggerEl)
      );
    </script>
  </body>
</html>

我的 AJAX.js：

const btn = document.querySelector(".get-users-btn");
const container = document.querySelector(".container");

function getUsers(callback) {
  const request = new XMLHttpRequest();
  request.open("GET", "https://jsonplaceholder.typicode.com/users");
  request.addEventListener("load", () => {
    const response = JSON.parse(request.responseText);
    callback(response);
  });
  request.addEventListener("error", () => {
    console.log("error");
  });
  request.send();
}

getUsers((response) => {
  console.log(response);
});

我的 renderUsers.js：

function renderUsers(response) {
  const fragment = document.createDocumentFragment();
  response.forEach((user) => {
    const card = document.createElement("div");
    card.classList.add("card");
    const cardBody = document.createElement("div");
    cardBody.classList.add("card-body");

    const userBtn = document.createElement("button");
    userBtn.setAttribute("type", "button");
    userBtn.classList.add("btn", "btn-info", "btn-lg");
    userBtn.setAttribute("data-bs-toggle", "popover");
    userBtn.setAttribute(
      "data-bs-title",
      "Дополнительная информация про человека:"
    );
    userBtn.setAttribute("data-bs-content", `${user.username}`);

    const title = document.createElement("h5");
    title.classList.add("card-title");
    title.textContent = user.name;

    userBtn.appendChild(title);
    cardBody.appendChild(userBtn);
    card.appendChild(cardBody);
    fragment.appendChild(card);
  });
  container.appendChild(fragment);
}

btn.addEventListener("click", (e) => {
  getUsers(renderUsers);
});

在此输入图像描述 我变了

const userBtn = document.createElement("a")

到

const userBtn = document.createElement("button");

我使用实时服务器。当你点击名字的时候它不起作用，但有时我发现它起作用了，重启后它就不再起作用了。我不想问愚蠢的问题，但这对我来说只是某种魔法。谢谢

bootstrap-5

1 个回答

  1. Best Answer

    由于 AJAX 是异步的，因此最好在将弹出框元素添加到 DOM后启动它们，因为当 BS 代码运行时，它们可能会或可能不会在 DOM 上，然后您就会得到所描述的行为。例如，将现有代码移至函数中，然后在附加列表时调用它：

      container.appendChild(fragment);
  // initiate popovers now
  initPopovers();

    // find all popovers and initiate
function initPopovers() {

  const popoverTriggerList = document.querySelectorAll(
        '[data-bs-toggle="popover"]'
      );
      const popoverList = [...popoverTriggerList].map(
        (popoverTriggerEl) => new bootstrap.Popover(popoverTriggerEl)
      );     
        
}

    演示：

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
  <title>AJAX</title>
</head>

<body>
  <h1>AJAX</h1>
  <button class="btn button btn-primary get-users-btn">Get Users</button>
  <div class="container"></div>
  <script>
    const btn = document.querySelector('.get-users-btn');
    const container = document.querySelector('.container');

    function getUsers(callback) {
      const request = new XMLHttpRequest();
      request.open('GET', 'https://jsonplaceholder.typicode.com/users');
      request.addEventListener('load', () => {
        const response = JSON.parse(request.responseText);
        callback(response);
      });
      request.addEventListener('error', () => {
        console.log('error');
      });
      request.send();
    }

    getUsers((response) => {
      console.log(response);
    });

    function renderUsers(response) {
      const fragment = document.createDocumentFragment();
      response.forEach((user) => {
        const card = document.createElement('div');
        card.classList.add('card');
        const cardBody = document.createElement('div');
        cardBody.classList.add('card-body');

        const userBtn = document.createElement('a');
        userBtn.setAttribute('type', 'button');
        userBtn.classList.add('btn', 'btn-info', 'btn-lg');
        userBtn.setAttribute('data-bs-toggle', 'popover');
        userBtn.setAttribute(
          'data-bs-title',
          'Дополнительная информация про человека:'
        );
        userBtn.setAttribute('data-bs-content', `${user.username}`);

        const title = document.createElement('h5');
        title.classList.add('card-title');
        title.textContent = user.name;

        userBtn.appendChild(title);
        cardBody.appendChild(userBtn);
        card.appendChild(cardBody);
        fragment.appendChild(card);
      });
      container.appendChild(fragment);

      initPopovers();
    }

    btn.addEventListener('click', (e) => {
      getUsers(renderUsers);
    });
  </script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
  <script>
    function initPopovers() {
      const popoverTriggerList = document.querySelectorAll(
        '[data-bs-toggle="popover"]'
      );
      const popoverList = [...popoverTriggerList].map(
        (popoverTriggerEl) => new bootstrap.Popover(popoverTriggerEl)
      );
    }
  </script>
</body>

</html>

    • 2

相关问题