Bootstrap popover不在传单弹出窗口内工作

Question

因此，根据标题，我试图在传单弹出窗口中放置一些引导弹出功能。具体来说，我的目标是这样做：

但是在传单弹出窗口中。我正在使用Django和一个HTML代码片段来生成表格（带有用于弹出窗口的信息图标），在侧边栏和弹出窗口中都使用了这个，因此代码是相同的，但侧边栏弹出窗口显示正常，没有任何反应当将鼠标悬停在传单弹出窗口中的信息图标上时。我用来生成popover的HTML是：

<th>
Stats date&nbsp;<a tabindex="0" data-toggle="popover" data-trigger="hover click" data-content="Dates for which the statistics below are calculated" class="info-popover"><span class="gtfse-icons-info2 info"></span></a>
</th>

我觉得它与我根据引导文档放置的观察者有关：

$(document).ready(function() {
    $('[data-toggle="popover"]').popover()
}

没有听到地图事件，但对传单（或一般的JS）知之甚少，以诊断原因......

非常感谢任何帮助

Answer 1

你的popover永远不会被附加，因为DOM中还没有弹出窗口。单击标记或使用弹出窗口的openPopup方法时，弹出窗口将插入到DOM中。有一种方法可以使这项工作，但它真的很hacky。所以这就是：

你需要在地图上监听popupopen事件，然后像这样初始化你的弹出窗口：

map.on('popupopen', function(){
    $(function () {
        $('[data-toggle="popover"]').popover();
    });
});

编辑：刚才意识到如果你只需要弹出窗口的悬停触发器就可以了，你就不会遇到下面描述的问题：

但现在你遇到了问题。当弹出窗口并且用户单击弹出窗口上的地图或关闭按钮时，弹出窗口将关闭，而弹出窗口则不会。有一个popupclose事件，你可以附加一个处理程序，所以你会说这应该工作：

map.on('popupclose', function(){
    $(function () {
        $('[data-toggle="popover"]').popover('destroy');
    });
});

但事实并非如此。我猜这个弹出窗口的DOM很快被破坏，以至于popover没有时间关闭。但是你仍然可以让它发挥作用。现在为hacky部分。通过添加弹出选项禁用弹出窗口中的closeButton和clickOnClose选项：

marker.bindPopup(/* content */, {'closeButton': false, 'closeOnClick': false});

将自己的关闭按钮添加到弹出窗口::

<button id="popup-close" class="btn btn-default">X</button>

这样你可以在关闭弹出框后自己关闭弹出窗口。将eventhandler函数更改为：

map.on('popupopen', function(openEvent){
    $(function () {
        $('[data-toggle="popover"]').popover();              // initialize popover
        $('#popup-close').on('click', function(){            // listen for click on close
            $('[data-toggle="popover"]').popover('destroy'); // destroy popover
            map.closePopup();                                // close popup
        });
    });
});

这真的很快而且很脏，如果你要这样做，你还应该清理关闭按钮上的clickhandler并通过监听mapclick事件等恢复onCloseClick功能。我只是表明它是可能的，但真的很糟糕。