引导弹出窗口不适用于可排序的 Jquery UI

Question

请在此处查看 jsfiddle。 http://jsfiddle.net/aejwne1w/

我正在使用 Jquery 2.1.1、Jquery UI 1.11.2 和 Bootstrap 3.2.0。我希望能够排序，以及通过可排序中的链接使用弹出框。可排序的作品，但弹出框没有。如果我拿走可排序的代码，弹出框就会起作用。

<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);

  });

这是我在 Hover 上制作的，因为我认为这对用户更友好

这里是更新示例

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

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

  });