0

여기에서 jsfiddle를 참조하십시오. http://jsfiddle.net/aejwne1w/Jscery UI에서 작동하지 않는 부트 스트랩 팝업이

Jquery 2.1.1, Jquery UI 1.11.2 및 Bootstrap 3.2.0을 사용하고 있습니다. 나는 sortable 내의 링크를 통해 Popover를 사용할뿐만 아니라 정렬 할 수 있기를 원한다. sortable는 작동하지만 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> 

자바 스크립트

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

는 내가 뭔가를 잘못하고 있어요 알고있다. 도와주세요! 미리 감사드립니다.

답변

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

    }); 
+0

감사를보십시오! 이 문제를 해결 한 것 같습니다. 내가 popover를 보여주기 위해 클릭하는 곳에서 어떻게 할 것이고, 두 번째 클릭은 그것을 숨길 것입니까? – projectalpha

+0

업데이트를 참조하십시오. –

+0

다시 한번 감사드립니다! 문제 해결 시간을 절약 해 줬습니다. 우리가 왜이 같은 해결 방법을해야하는지 어떤 생각? – projectalpha

관련 문제