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。

希望有所幫助。