Twitter的引导：Popovers没有显示出来的第一次点击，但出现在第二次点击

Question

这是我的标记：

<a href="#" class="reviews" id="like" rel="popover" data-content="" data-placement="right" data-original-title="Like episode"> 
    <i class="icon-thumbs-up"></i> 
    Loved it 
</a>(<span id="episode_likes">{{ episode_likes }}</span> 

这是JavaScript：

$('a.reviews#like').click(function(e){ 
    var element = $(this); 
    $.ajax({ 
     url: '/episoderatings/like/', 
     type: 'POST', 
     dataType: 'json', 
     data: { 
      csrfmiddlewaretoken: '{{ csrf_token }}', 
      episode_number: current, 
      story: current_story 
     }, 
     success: function(response){ 
      if(response=='You have liked this episode'){ 
       $('span#episode_likes').text(parseInt($('span#episode_likes').text())+1); 
      } 
      $(element).attr('data-content',response); 
      $(element).popover(); 
     } 
    }); 
    e.preventDefault(); 
}); 

问题是，当我点击“喜欢”按钮，弹出窗口不会在第一次点击时显示，所以我错过了我是否喜欢该页面的重要反应。当我点击“喜欢”按钮时，第二次弹出窗口出现，然后它从那里开始保持它的切换行为。并有想法？

Answer 1

当您第一次点击您的链接，没有酥料饼还没有初始化，即可以显示。您通过致电$(element).popover();初始化弹出窗口。所以，你的代码初始化弹出后点击链接，没有什么是第一次显示。第二次点击它时，弹出窗口就会显示出来。

您必须调用.popover()链接被点击之前。在你的情况

$('a.reviews#like') 
    .popover({trigger: 'manual'}) 
    .click(function(e){ 
     var element = $(this); 
     $.ajax({ 
      url: '/episoderatings/like/', 
      type: 'POST', 
      dataType: 'json', 
      data: { 
       csrfmiddlewaretoken: '{{ csrf_token }}', 
       episode_number: current, 
       story: current_story 
      }, 
      success: function(response){ 
       if(response=='You have liked this episode'){ 
        $('span#episode_likes').text(parseInt($('span#episode_likes').text())+1); 
       } 
       $(element).attr('data-content',response).popover('show'); 
      } 
     }); 
     e.preventDefault(); 
    }); 

应该做的伎俩。

公告第2行调用.popover({trigger: 'manual')初始化的酥料饼，并禁用它，你点击后会出现一次。这不会有帮助，因为您在AJAX回调中设置其内容，并且弹出窗口可以显示出来。因此，在回调中，您必须在设置data-content属性后，手动拨打.popover('show')。

一两件事：你必须调用.popover('hide')在某些时候，你表现出酥料饼后。当你再次点击链接时它不会消失，因为AJAX调用只会再次触发，并且会再次调用.popover('show')。我能想到的一个解决方案是在弹出窗口处于活动状态时向链接添加一个类，并在每次单击时检查该类。如果班级在那里，您可以致电.popover('hide')并删除该班级，否则请执行您的AJAX呼叫。我创建了a small jsfiddle来展示我的意思。

欲了解更多信息look at the docs。

希望有所帮助。