Bootstrap 弹出窗口未弹出

Question

我使用 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");

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

Answer 1

在将弹出框元素添加到 DOM 后启动弹出元素，例如，将现有代码移至函数中，然后在附加列表时调用它：

  container.appendChild(fragment);

  initPopovers();

function initPopovers() {

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

Bootstrap 弹出窗口未弹出

问题描述投票：0回答：1

1个回答

最新问题

Bootstrap 弹出窗口未弹出

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1