Question

我找到了一个没有帮助的相关帖子： 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（）调用当我第二次点击按钮时popover显示，然后从那里开始维持它的切换行为。

Answer 1

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

你不需要自己手动显示/隐藏弹出窗口，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"
            });

弹出窗口在第一次点击时没有显示，但在第二次点击时显示

1 个答案: