2013-03-11 209 views
3

我发现了一个相关的帖子里面并没有帮助: Twitter bootstrap:Popovers are not showing up on first click but show up on second clickPopovers没有出现在第一次点击,但出现在第二次点击

所不同的是在我的网页我有需要酥料饼的几个要素(几提示图标),所以我需要循环他们..

我的标记:

<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()调用当我点击按钮时,第二个实时弹出窗口显示出来,然后从那里开始维护它的切换行为。

+0

是有必要解除绑定,当你防止你的下一个点击handler.Is getHelp和Ajax调用什么的默认操作的点击?我认为最好通过类来附加这些处理程序,而不是通过名称获取元素并自行循环,只需要执行$('。my-popover-class')。click(function(){// Your Logic });并将该事件附加到该类的所有对象。虽然原生JavaScript比jQuery更快,但您仍然可以在这里使用它,但应该使用它。 – BillPull 2013-04-02 15:40:44

回答

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" 
      }); 
相关问题