引导弹出窗口在传单弹出窗口内不起作用

Question

因此，根据标题，我正在尝试将一些引导弹出窗口功能放入传单弹出窗口中。具体来说，我的目标是：

但在传单弹出窗口中。我正在使用 Django 和 HTML sn-p 生成表格（您将鼠标悬停在弹出窗口上的信息图标），该表格在侧边栏和弹出窗口中都使用，因此代码相同，但侧边栏弹出窗口看起来很好并且将鼠标悬停在传单弹出窗口中的信息图标上时没有任何反应。我用来生成弹出框的 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

您的弹出框永远不会被附加，因为弹出框还没有出现在 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 被破坏得如此之快，以至于弹出窗口没有时间关闭。但你仍然可以让它工作。现在是骇人听闻的部分。通过添加弹出选项来禁用弹出窗口上的 closeButton 和 clickOnClose 选项：

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

在弹出窗口中添加您自己的关闭按钮::

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

这样，您可以在关闭弹出窗口后自己关闭弹出窗口。将事件处理函数更改为：

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 功能。我只是表明这是可能的，但真的很hacky。