Bootstrap多彈出 - 通過Ajax加載內容TypeError

Question

我有幾個彈出窗口（在一個標籤），使Ajax調用填充他們的數據內容。我使用下面的代碼來撥打電話：

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.withajaxpopover').bind('hover',function(){ 
     var el=$(this); 

     $.ajax({ 
      type: "GET", 
      url: el.attr("data-url"), 
      data: el.attr("alt"), 
      dataType: "html", 
      success: function(data) { 
       el.attr("data-content", data); 
      } 
     }); 

     console.log(el.attr("data-content")); 
     el.popover('show'); 
    }); 
}); 
</script> 

，然後使這樣的電話：

<a href="#" id="test1" title="blabla" class="withajaxpopover" data-url="/ajax/project">blabla</a><br><br> 
<a href="#" id="test2" title="test2" class="withajaxpopover" data-url="/ajax/ports/">hahahaha</a> 

當我將鼠標懸停在一個鏈接中，酥料餅正確地出現，但是一個酥料餅後已經顯示，我收到以下錯誤，當我將鼠標懸停在任何其他popovers：

Uncaught TypeError: Object [object Object] has no method 'popover' 

當我看到控制檯，所有後續遊動Ajax是返回正確的數據，但酥料餅纔是沒有出現。任何想法我做錯了什麼？

Answer 1

我最終不得不使用一個完整的其他擴展來完成我所需要的。請參閱：http://designwithpc.com/Plugins/Hovercard具有更好的ajax支持和懸停功能，然後啓動彈出窗口。而且js很容易修改以適應任何特定的需求。強烈推薦。

Answer 2

試試這個：

$(document).ready(function() { 
    $('.withajaxpopover').bind('hover',function(){ 
     var el=$(this); 

     $.ajax({ 
      type: "GET", 
      url: el.attr("data-url"), 
      data: el.attr("alt"), 
      dataType: "html", 
      success: function(data) { 
       el.attr("data-content", data); 
       el.popover('show'); 
      } 
     }); 
    }); 
});