Bootstrap Popover 没有响应点击事件

Question

我可以在控制台中看到我的数据正在弹出框内填充，但它根本没有响应我的点击事件，这有点令人抓狂。

这是包含弹出框的函数的摘要：

$(function(){
    $(".run-btn").click(populateSteps);
    $(".run-all-suite").click(getId);
    $(".run-all-btn").click(runAll);
    $('[data-toggle="popover"]').popover();
});

var table_draw = '<table class="table table-bordered"><tr><th>Title</th><th>Status</th><th>Holly</th><th>Call ID & TestRail ID</th><th>Failure reason</th></tr>';
                $.each(cases.cases, function (index, value) {
                    var popupControl = "<button type='button' class='btn btn-default' data-container='body' data-toggle='popover' data-content='" + value.script + "' data-original-title='' title=''></button>";
                    table_draw += "<tr><td class='title col-xs-2'>" + value.title + popupControl +"</td>" +
                    "<td class='status col-xs-1'><i class='fa fa-spin fa-spinner'></i><span> Running...</span></td>" +
                    "<td class='holly col-xs-1'>" + cases.holly + "</td>" +
                    "<td class='call-id col-xs-1'></td>" +
                    "<td class='reason col-xs-2'></td></tr>";

                    $('body').on('click', function (e) {
                        $('[data-toggle="popover"]').each(function () {

                            if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                                $(this).popover('hide');
                            }
                        });
                    });
                });

控制台输出：

我的参考文件的顺序：

<!-- Load Bootstrap JS source for popover -->
        <script src="{% static 'common/jquery/1.10.2/jquery.min.js' %}"></script>
        <script src="{% static 'common/tooltip/tether.min.js' %}"></script>
        <script src="{% static 'common/bootstrap/3.3.5/dist/js/bootstrap.min.js' %}"></script>

这是一个 Django 项目。弹出框位于一个 JS 文件中，该文件在它显示的页面上被引用，即dashboard.html：

<script>
{% include 'runner/dashboard.js' %}
</script>

base.html 文件包含上面的 js 引用，在显示页面上也引用了这些引用 {% 扩展 'core/base.html' %}

我之前在另一个项目中创建了弹出框，但无论出于何种原因，它都不会出现在我面前，这让我抓狂。如果你能提供帮助，或者如果我需要提供其他东西来帮助你，我会的。

Answer 1

鉴于您向我们展示的内容，在 document.ready() 触发时 table_draw 的内容尚未呈现为 HTML 的可能性很大。您需要在页面上实际存在事件侦听器（您的 $('[data-toggle="popover"]').popover(); 行）之后注册它。