javascript - 弹出框在第一次点击时不显示，但在第二次点击时显示

Question

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

不同之处在于我的页面中有几个元素需要 popover(几个提示图标)，所以我需要遍历它们..

我的标记:

<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() 调用弹出窗口出现，然后从那里开始保持其切换行为。

Answer 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"
            });