Bootstrap弹出框.toggle()仅显示

Question

我试图集成Twitter Bootstrap的弹出框；因为一些动态元素是通过Ajax加载的，所以我被迫使用javascript API，这些元素也应该有反应。

基本上，这里是一个例子标签，应该有反应：

<a data-container="#appConfigDialog" data-toggle="popover" data-placement="top" 
   data-content="&lt;img src=&quot;URL&quot; /&gt;"
   data-html="true" href="#" 
   class="popoverFileSee btn btn-default">See</a>

顺便替换URL为正确的URL。

我的JS代码：

$( document ).on( "click", ".popoverFileSee", function() {
    $( this ).popover( "toggle" );      
    return false;
});

我想要实现以下行为：

• 第一次点击时，弹出框显示
• 打开的弹出框再次点击时应关闭它

"toggle" 不是这个目的吗？这段代码有问题吗，还是我需要在我的应用程序中检查其他地方？

谢谢

编辑：目前，它始终显示弹出框，即使它已经打开了。 奇怪的是：如果我在回调函数中添加 alert( "test" );，那么它就能正常工作。

- Jérémy Dutheil

---

它目前有什么行为？ - Rory McCrossan

它总是显示弹出窗口，即使它已经打开了。 - Jérémy Dutheil

Answer 1

最终我自己找到了答案.. ;) 我只需要添加一个属性到我的链接中: data-trigger="manual"

- Jérémy Dutheil

Answer 2

不使用 click 事件，从 popover function 中 移除 toggle，例如：

$(".popoverFileSee").popover();

演示

更新，如果你需要为此添加点击事件，那么可以像这样添加独立于弹出框的popover：

$(".popoverFileSee").popover();
$(".popoverFileSee").on('click',function(){
   // your ajax code here
});

- Rohan Kumar

---

就像我说的那样，我需要使用 click事件，因为我是通过Ajax加载一些元素的 ;) - Jérémy Dutheil

是的，那不是重点；当我提到“使用ajax加载一些元素”时，我指的是“具有弹出框按钮的元素”。 一个解决方案可能是在每次加载新元素时调用 $( ".popoverFileSee" ).popover()，但我更喜欢只需添加一个“点击事件”，它会自动执行这个操作；请查看我的回答以了解如何在这种情况下解决问题。 - Jérémy Dutheil