弹出框在第一次单击时不显示，但在第二次单击时显示答案

【问题标题】：Popovers not showing up on first click but show up on second click弹出框在第一次单击时不显示，但在第二次单击时显示
【发布时间】：2013-02-27 00:19:01
【问题描述】：

我发现了一篇没有帮助的相关帖子： Twitter bootstrap:Popovers are not showing up on first click but show up on second click

不同之处在于我的页面有几个需要弹出框的元素（几个提示图标），所以我需要遍历它们..

我的标记：

<a href="#" name="click_help_container" id="click_mainhomeform_tasks" data-original-title=""><img class="help_icon" src="http://media.mysite.com/pub/images/help/tips-icon.png">   </a>

这是我的javascript：

    var h=document.getElementsByName("click_help_container");
for (i=0;i<h.length;i++) 
{
    $('#'+h[i]['id']).click(
        function () 
        {
            var id=$(this).attr("id");
            getHelp(id,$(this),function(t,elem)
            {
                var isVisible = false;
                var clickedAway = false;                    
                $(elem).unbind('click');
                $(elem).popover(
                {
                    "title":t.title,
                    "content":"<p class='popover_body_text'>"+t.content+"</p>",
                    "html":true,
                    "animation":true,
                    "placement":"bottom",
                    "trigger":"manual"
                }).click(function(e) 
                {
                    $(this).popover('show');
                    clickedAway = false;
                    isVisible = true;
                    e.preventDefault();
                });

                $(document).click(function(e) {
                if(isVisible & clickedAway)
                {
                    $(elem).popover('hide')
                    isVisible = false;
                    clickedAway = false;
                }else
                {
                    clickedAway = true;
                }
                });

                //$(elem).popover('show');
            });
        });
}

问题是当我单击tips-icon.png 按钮时，弹出框不会在第一次单击时出现（我想这是因为我有2 .click() 调用当我第二次单击该按钮时弹出窗口出现，然后从那里开始保持其切换行为。

【问题讨论】：

当您在下一个单击处理程序中阻止默认操作时是否有必要取消绑定单击。是 getHelp 和 Ajax 调用还是什么？我认为最好通过一个类来附加这些处理程序，而不是通过名称获取元素并自己循环它们，你可以这样做 $('.my-popover-class').click(function () { // 你的逻辑});这会将事件附加到该类的所有对象。虽然原生 javascript 比 jQuery 快，但你仍然在这里使用它，你应该使用它。

标签： javascript twitter-bootstrap popover

【解决方案1】：

您不需要遍历所有元素并一一初始化弹出框，您可以一次将弹出框应用于具有此名称的所有项目（与循环中的操作相同）。

而且您不需要自己手动显示/隐藏弹出框，bootstrap 可以为您完成。

我认为这应该适合你：

$("a[name='click_help_container']").popover(
            {
                "title":t.title,
                "content":"<p class='popover_body_text'>"+t.content+"</p>",
                "html":true,
                "animation":true,
                "placement":"bottom",
                "trigger":"click"
            });

【讨论】：