Javascript 带下拉的自举Popover

我试着在一个popover中粘贴一个下拉框（两个都是引导框），它“有点”起作用。我打开的第一个popover工作正常，但一旦我打开另一个（从不同的图像）它就会停止工作（看看我的意思）

在我的HTML中，我确保每个下拉列表都有不同的ID（通过绑定我的对象ID，它总是不同的），因为这显然是Bootstrap使用的：

<div class="dropdown collection-selection-view">
    <button class="btn btn-primary dropdown-toggle collection-dropdown" type="button" id="collection-dropdown-<%- id %>" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Choose or Create Collection
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu user-collection-list" aria-labelledby="collection-dropdown-<%- id %>"></ul>
</div>

选择或创建集合

它们使用唯一的ID进行渲染

示例#1：

选择或创建集合

示例2：

选择或创建集合

---

但由于某些原因，它仍然不起作用。。。你知道会发生什么吗？

问题可能出在你的JavaScript或一些你不关心的HTML中。你能补充一下吗？事实上，我无法重现这个问题。对我来说也可以。试着建立一个非工作模式example@JoshuaDwire好的，我能够隔离问题，这是整个项目，下载zip文件后运行index.html。谢谢大家!@保利托：那真的很有趣。我只是在隔离问题的地方贴了一条评论，它仍然发生在我身上，这里：好的，。。问题是，$（document）.off（'click'）出现在“show.bs.popover”事件处理程序中。我试图停止收听click事件以停止运行该功能，但我想这不是解决方法。。。

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle collection-dropdown" type="button" id="collection-dropdown-40261" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Choose or Create Collection
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu user-collection-list" aria-labelledby="collection-dropdown-40261">
        <li>
            <a href="#">Happy collection</a>
        </li>
        <li>
            <a href="#">Sad collection</a>
        </li>
    </ul>
</div>

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle collection-dropdown" type="button" id="collection-dropdown-39935" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Choose or Create Collection
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu user-collection-list" aria-labelledby="collection-dropdown-39935">
        <li>
            <a href="#">Happy collection</a>
        </li>
        <li>
            <a href="#">Sad collection</a>
        </li>
    </ul>
</div>