JS生成卡中的Bootstrap Popover函数未执行，而是直接嵌入到f中时被执行。图标

Question

我通过JS将popover代码嵌入HTML标记中，但是只有直接将其嵌入HTML时才执行。在控制台中，我可以看到JS生成的HTML标签内部的必要代码以及与它们相关的事件，但是没有悬停，也没有点击反应。

我通过JS生成卡片。 Card-body包含1 ... n，每个都包含和

-标记。如果我单击这些标签，则希望它们打开一个嵌入了d3.js图表​​的弹出框。例如，如果我直接将popover嵌入图标的HTML中，则使用嵌入的图表生成popover的popover（）函数就可以很好地工作。但是，如果我通过JS将完全相同的代码嵌入HTML标记中，并通过JS生成这些标记，那么如果我单击现在应该执行弹出框的Icon / Paragraph，则什么也不会发生。就像我要执行的popover（）函数（通过id =“ popover_function”引用）没有执行并且没有单击，也没有悬停反应。

另一件事是，如果我不通过id =“ popover-function”调用popover函数，而是通过testwise直接通过JS将简单的popover嵌入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>

然后显示此简单的弹出窗口？！？

如果我直接将其嵌入HTML中，我不明白为什么会执行popover函数，但是如果我通过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中的图标或段落时显示弹出窗口。