Я вставляю popover-код в HTML-тег через JS, но он выполняется только в том случае, если я встраиваю его непосредственно в HTML.В консоли я вижу необходимый код внутри HTML-тегов, сгенерированных JS, и привязываемое к ним событие, но при этом нет ни парения, ни реакции на нажатие.
Я генерирую карту с помощьюJS.Тело карты содержит 1 ... n, каждый из которых содержит тег * и
.Если я нажму на эти теги, я хочу, чтобы они открыли всплывающее окно, где я встроил диаграмму d3.js.Например, если я вставляю поповер прямо в HTML-код иконки, функция popover (), генерирующая поповер с помощью встроенной диаграммы, работает отлично.Но если я встраиваю тот же самый код, необходимый в HTML-тег через JS, и генерирую эти теги через JS, то ничего не произойдет, если я нажму на иконку / абзац, который теперь должен выполнить всплывающее окно.Это как popover () - функция, которую я хочу выполнить (на которую указывает id = "popover_function"), не выполняется, и щелчка нет, реакция -Nover при наведении.
Что-то еще, если я не вызываю функцию popover через id = "popover-function", а тестирую, просто вставляю простой popover через JS прямо в HTML-теги, например:
<i class="fas fa-birthday-cake" data-container="body" data-toggle="popover" data-placement="right" title="Hello " data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."></i>
тогда этот простой поповер отображается?!?
Я не понимаю, почему выполняется функция popover, если я встраиваю ее прямо в HTML, а не если явстроить его через JS, что я делаю не так?
Вот HTML:
<div class="container" id="buttonContainer">
<div class="row justify-content-end">
<div class="col-md-1"><i class="fas fa-minus fa-2x" id="myPopover" data-toggle="popover"
data-placement="left"></i></div>
<div class="col-md-1"><i class="fas fa-plus fa-2x" id="chartPopover" data-toggle="popover"
data-placement="left"></i></div>
<!--tabindex="0" data-trigger="focus"-->
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-6 col-sm-6">
<div class="card">
<div class="card-body">
<a class="collapse-card-header" href="#card-1-content" data-toggle="collapse">
<h5 class="card-title" >Title</h5>
</a>
<div id="card-1-content" class="collapse">
<div class="card-text">
<div class="tile-content-attribute"> <i class="fas fa-weight" id="chartPopover"
data-toggle="popover" data-placement="left" data-container="body"></i>
<p class="font-weight-normal">128kg</p>
</div>
<div class="tile-content-attribute"><i class="fas fa-birthday-cake"
data-container="body" data-toggle="popover" data-placement="right"
title="Hello "
data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."></i>
<p class="font-weight-normal" data-container="body" data-toggle="popover"
data-placement="right" title="Hello"
data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Birthday</p>
</div>
<div class="tile-content-attribute"><i class="fas fa-weight "></i>
<p class="font-weight-normal">128kilos</p>
</div>
<div class="tile-content-attribute"><i class="fas fa-birthday-cake"></i>
<p class="font-weight-normal">birthday</p>
</div>
</div>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
</div>
Это мой соответствующий JS-файл:
Функцияinit_popovers () загружается при загрузке веб-сайта.
function init_popovers() {
$(function () {
$('[data-toggle="popover"]').popover({
container: 'body',
})
})
$("#chartPopover").popover({
title: '<h3 class="custom-title">Custom Title</h3>',
content: '',
html: true,
container: 'body',
}).on('shown.bs.popover', function () {
popoverChart();
});
$('#myPopover').popover({
title: '<h3 class="custom-title">Lets Make a Chart ;)</h3>',
html: true,
container: 'body',
})
$("#chartPopover").on('click', function () {
$('#chartPopover').popover("show");
});
}
и вот мой CSS:
.tile {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%);
border-radius: 1px;
width: 150px;
height: 150px;
}
.tile-header {
height: 20px;
margin-top:15px;
margin-bottom:20px;
margin-left:5px;
margin-right: 5px;
}
.tile-header > p{
color:white;
font-family: 'Roboto',
sans-serif;
}
.tile-content-attribute {
height:40px;
color:white;
font-family: 'Roboto',
sans-serif;
}
.tile-content-attribute > i {
padding-top:3px;
float:left;
margin-left:10px;
}
.tile-content-attribute > p {
float: right;
margin-right: 10px;
}
html {
font-size: 1rem;
}
#chartPopover {
z-index: -1 !important;
}
@include media-breakpoint-up(sm) {
html {
font-size: 1.2rem;
}
}
@include media-breakpoint-up(md) {
html {
font-size: 1.4rem;
}
}
@include media-breakpoint-up(lg) {
html {
font-size: 1.6rem;
}
}
.card {
margin-top: 20px;
margin-bottom: 20px;
font-family: 'Roboto',
sans-serif;
color:white;
background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%);
}
.collapse-card-header {
font-family: 'Roboto',
sans-serif;
color:white;
}
.card-text > i{
float:left;
}
.card-text > p {
float: right;
}
.card-content-attribute {
height: 40px;
color: white;
font-family: 'Roboto',
sans-serif;
}
.card-content-attribute>i {
float: left;
}
.card-content-attribute>p {
float: right;
}
#buttonContainer > i {
float:right;
margin-right:30px;
}
.popover {
background-color: #b94a48;
border: none;
border-radius: unset;
min-width: 100px;
width: 100%;
max-width: 400px;
overflow-wrap: break-word;
}
.popover-inner {
width: 500px !important;
max-width: 500px !important;
}
.popover {
display:block !important;
max-width: 1000px !important;
max-height:1000px !important;
width:auto;
}
.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%;
vertical-align: top;
overflow: hidden;
}
.svg-content {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
Извините, что включил весь CSS, но я немного новичок в CSS иЯ еще не совсем понял, как могут перекрываться некоторые функции, например, может быть предотвращение щелчка мышью.
Я хочу, чтобы всплывающее окно появлялось, когда я щелкаю по значку или абзацу в сгенерированном JS HTML.