Eu faço a renderização simples de usuários do jsonplaceholder com XMLHttpRequest. E eu quero fazer o popover para cada usuário. Este popover mostrará o nome de usuário, email, telefone, site. Não sei se isso pode ser chamado de erro. Porque o console não exibe nenhum erro e a janela pop-up às vezes funciona, mas na maioria das vezes não. Sem erros visíveis. Eu faço tudo de acordo com as instruções do bootstrap. Vou postar o código abaixo.
Meu 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>
Meu 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);
});
Meu 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);
});
eu mudei
const userBtn = document.createElement("a")
para
const userBtn = document.createElement("button");
Eu uso o Live Server. Não funciona quando você clica no nome, mas às vezes acho que funciona, depois de reiniciar não funciona novamente. Não quero fazer perguntas estúpidas, mas isso é apenas uma espécie de mágica para mim. Obrigado
Como o AJAX é assíncrono, é melhor iniciar os elementos popover depois de serem adicionados ao DOM, porque quando o código BS é executado, eles podem ou não estar no DOM, e então você obtém o comportamento descrito. Por exemplo, mova o código existente para uma função e chame-o quando a lista for anexada:
demonstração: