Can't get Bootstrap Popover to work on generated Cards

Question

I have a simple search website that generates Bootstrap Cards with artist name, the cover art, and album title that corresponds to search terms. I want to include the "dismiss on next click" popover when you click the album cover art image that displays a list of songs for the album or the back cover art. I've gotten the popover to work with simple text that is in my HTML file but when I apply the same code in my JS file to the Card it doesn't work.

Here is the snippet of my function for outputting the card, taking information that loops through an array of objects.

$(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);
};

I believe it has something to do with the popover not being present in the html when the page loads but is generated for each individual card once a button is pressed.

This is the bit of code that I created in my HTML file that the popup works on:

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

Answer 1

I think you should try to use toggle() function on the popover if data-toggle is not working.

• http://api.jquery.com/toggle
• https://www.w3schools.com/jquery/event_toggle.asp

Answer 2

I think you want something like this. if not then tell.Same thing done with using button click

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