Question

我有一个简单的搜索网站，生成的Bootstrap Cards具有与搜索词相对应的艺术家姓名，封面和专辑名称。当您单击专辑封面图像时，我想包括“下次单击时关闭”弹出框，该图像显示专辑或封底封面的歌曲列表。我已经将弹出框与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

我认为您想要这样的东西。如果没有，则告诉。通过单击按钮完成相同的操作

$(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 Popover在生成的卡上工作

2 个答案: