3

我发现了一篇没有帮助的相关帖子： Twitter bootstrap:Popovers 在第一次点击时没有出现，但在第二次点击时出现

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

我的标记：

<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() 调用当我第二次单击按钮时弹出框出现然后它从那里开始保持它的切换行为。

4

1 回答 1

0

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

而且您不需要自己手动显示/隐藏弹出框，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"
            });
于 2013-04-25T11:24:43.133 回答