Bootstrap popover不能用jquery UI排序

Question

請看這裏的jsfiddle。 http://jsfiddle.net/aejwne1w/

我使用的是Jquery 2.1.1，Jquery UI 1.11.2和Bootstrap 3.2.0。我希望能夠排序，以及通過排序內的鏈接使用彈出窗口。可排序的作品，但popover沒有。如果我拿走可排序的代碼，popover就可以工作。

<div class="stats"> 
<div class="panel panel-default ui-sortable-handle"> 
    <div class="panel-body"> 
     test1 
     <a href="#" tabindex="0" data-toggle="popover" data-trigger="focus" data-html="true" viewport="{selector: '.container', padding: 0}" title="" data-content="test1" data-original-title="This is test1">More</a> 
    </div> 
</div> 
<div class="panel panel-default ui-sortable-handle"> 
    <div class="panel-body"> 
     test 2 
     <a href="#" tabindex="0" data-toggle="popover" data-trigger="focus" data-html="true" viewport="{selector: 'body', padding: 0}" title="" data-content="test2" data-original-title="This is test 2">More</a> 
    </div> 
</div> 
<div class="panel panel-default ui-sortable-handle"> 
    <div class="panel-body"> 
     test 3 
     <a href="#" tabindex="0" data-toggle="popover" data-trigger="focus" data-html="true" viewport="{selector: 'body', padding: 0}" title="" data-content="test3" data-original-title="This is test 3">More</a> 
    </div> 
</div> 
</div> 

的Javascript

<script> 
$('a[data-toggle=popover]').popover().click(function (e) { 
    e.preventDefault(); 
}); 
$(".stats").sortable(); 
</script> 

我知道我做錯了什麼。請幫忙！先謝謝你。

Answer 1

試試這個

$(function() { 
     $('[title]').attr("data-rel", "tooltip"); 
     $("[data-rel='tooltip']") 
      .attr("data-placement", "top") 
      .attr("data-content", function() { 
       return $(this).attr("title") 
      }) 
      .removeAttr('title'); 


     var showPopover = function() { 
      $(this).popover('show'); 
     }; 
     var hidePopover = function() { 
      $(this).popover('hide'); 
     }; 
     $("[data-rel='tooltip']").popover({ 
      trigger: 'manual' 
     }).click(showPopover).hover(showPopover, hidePopover); 

    }); 

這是我對哈弗做，因爲我認爲這是對用戶更友好

這裏是更新例如

$(function() { 
     $('[data-toggle=popover]').attr("data-rel", "tooltip"); 

     var showPopover = function() { 
      $(this).popover('toggle'); 
     }; 
     $("[data-rel='tooltip']").click(showPopover); 

    });