2013-03-11 2 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, popover не появляется при первом щелчке (я думаю, это потому, что у меня есть вызовы 2.click() Когда я нажимаю на кнопку второй появляется всплывающее окно времени, и затем он поддерживает, что он переключает поведение оттуда.

+0

является необходимым отвязать щелчок, когда вы предотвращающее действие по умолчанию в вашем следующем нажмите handler.Is GetHelp и Ajax вызов или что-то? Я думаю, что лучше прикрепить эти обработчики через класс, а не получать элементы по имени и зацикливать на них сами, вы могли бы просто сделать $ ('. My-popover-class'). Click (function() {// Ваша логика }); и это приложит событие ко всем объектам этого класса. Хотя собственный javascript быстрее, чем jQuery, вы все еще используете его здесь, вы, вероятно, должны его использовать. – BillPull

ответ

0

Вам не нужно прокручивать все элементы и инициализировать popovers один за другим, вы можете применить popover ко всем элементам с этим именем сразу (так же, как и в цикле).

И вам не нужно показывать/скрывать popovers вручную самостоятельно, бутстрап может сделать это за вас.

Я думаю, что это должно работать для вас:

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