Не могу заставить Bootstrap Popover работать на сгенерированных картах - PullRequest
Новая
       20

Не могу заставить Bootstrap Popover работать на сгенерированных картах

0 голосов
/ 16 февраля 2019

У меня есть простой поисковый веб-сайт, который генерирует Bootstrap Cards с именем исполнителя, обложкой и названием альбома, которое соответствует условиям поиска.Я хочу включить всплывающее окно «Отклонить при следующем щелчке» при нажатии на изображение обложки альбома, в котором отображается список песен для альбома или обложки обложки.Я заставил всплывающее окно работать с простым текстом, который находится в моем HTML-файле, но когда я применяю тот же код в моем JS-файле к карте, он не работает.

Вот фрагмент моей функции для вывода карты, собирающей информацию, которая проходит через массив объектов.

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

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019

Я думаю, вы хотите что-то подобное.если нет, то скажите. То же самое сделано с помощью нажатия кнопки 

$(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>
0 голосов
/ 17 февраля 2019

Я думаю, вы должны попытаться использовать функцию toggle () на всплывающем окне, если переключение данных не работает.

...