无法让 Bootstrap Popover 处理生成的卡片答案

【问题标题】：Can't get Bootstrap Popover to work on generated Cards无法让 Bootstrap Popover 处理生成的卡片
【发布时间】：2019-02-16 02:35:10
【问题描述】：

我有一个简单的搜索网站，它会生成带有与搜索词相对应的艺术家姓名、封面艺术和专辑标题的引导卡。当您单击显示专辑或封底的歌曲列表的专辑封面艺术图像时，我想包括“下次单击时关闭”弹出窗口。我已经让弹出框可以处理 HTML 文件中的简单文本，但是当我将 JS 文件中的相同代码应用于 Card 时，它不起作用。

这是我用于输出卡片的函数的 sn-p，它获取循环通过对象数组的信息。

$(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>

【问题讨论】：

这对我也不起作用。
你能分享一下工作的sn-p代码吗
是的，我刚刚添加了有效的代码。

标签： javascript arrays object bootstrap-4 popover

【解决方案1】：

我想你想要这样的东西。如果没有，那么告诉。使用按钮单击完成同样的事情

$(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>

【讨论】：

这个有用吗
是的！所以我把 $('a').popover("show");在首先生成引导卡的按钮上单击。这立即显示了弹出框，这不是我想要的，所以我只是添加了一个 $('a').popover("hide");之后，现在它完美地工作了！我认为问题在于我试图在尚不存在的东西上调用弹出框，并且由于页面上存在创建所有内容的按钮，因此它运行良好。谢谢！

【解决方案2】：

如果 data-toggle 不起作用，我认为您应该尝试在弹出框上使用 toggle() 函数。

【讨论】：