无法让 Bootstrap 弹出框在生成的卡片上工作

Question

我有一个简单的搜索网站，可以生成 Bootstrap 卡片，其中包含与搜索词相对应的艺术家姓名、封面艺术和专辑名称。当您单击显示专辑歌曲列表或封底艺术的专辑封面艺术图像时，我想包括 "dismiss on next click" 弹出窗口。我已经让弹出窗口处理我的 HTML 文件中的简单文本，但是当我将我的 JS 文件中的相同代码应用到 Card 时，它不起作用。

这是我的函数片段，用于输出卡片，获取循环遍历对象数组的信息。

$(document).ready(function () {
$('[data-toggle="popover"]').popover()
});

function outputResults() {
  outputDiv.append(`<div class="card album bg-dark text-white col" style="width:18rem;"><h5 class="card-header">${i.artist}</h5>
    <a tabindex="0" data-trigger="focus" title="SONGS" data-toggle="popover"  data-content="THIS IS THE INFO I WANT TO SHOW IN THE POPOVER"><img class="card-img-top" src="${i.cover}" alt="${i.title}"></a>
    <div class="card-footer"><a target = "_blank" href="${i.link}">"${i.title}"</a> -${i.year}</div></div>`).children(':last').hide().fadeIn(1500);
};

我认为这与页面加载时 html 中不存在的弹出框有关，但在按下按钮后会为每张卡片生成。

这是我在我的 HTML 文件中创建的代码，弹出窗口在其中运行：

<a tabindex="0" data-trigger="focus" title="Header" data-toggle="popover" data-content="Some content">Click Me</a>

Answer 1

如果数据切换不起作用，我认为你应该尝试在弹出窗口上使用 toggle() 函数。

Answer 2

我想你想要这样的东西。如果不是，那么 tell.Same 使用按钮点击完成的事情

$(document).ready(function() {
  $('[data-toggle="popover"]').popover()
});
outputResults();

function outputResults() {
  $("#outputDiv").append(`<div class="card album bg-dark text-white col" style="width:18rem;">
  <h5 class="card-header"></h5>
    <a tabindex="0" data-trigger="focus" title="SONGS" data-toggle="popover"  data-content="THIS IS THE INFO I WANT TO SHOW IN THE POPOVER"><img class="card-img-top"  >click dynamic</a>
    <div class="card-footer"><a target = "_blank" href=""</a> </div></div>`);
};
$("#btn").on('click',function(){
$('a').popover("show");
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script><a tabindex="0" data-trigger="focus" title="Header" data-toggle="popover" data-content="Some content">Click Me</a><br><br>
<BR><br><br>
<BR><br><br>
<BR><br><br>
<BR>
<div id=outputDiv></div>
<button id=btn>click here </button>

无法让 Bootstrap 弹出框在生成的卡片上工作

Can't get Bootstrap Popover to work on generated Cards

javascript

arrays

object

popover

bootstrap-4