Bootstrap Popover在本地托管代碼時不起作用，但在jsbin上起作用

Question

這太瘋狂了……我一直在試圖弄清楚為什么我的popover代碼在本地托管時不會顯示，但是在jsbin上可以正常工作。 讓我知道你們的想法，我為此感到瘋狂。 謝謝大家！

所以這里是：

jsbin： http ：//jsbin.com/ocepaw/1/edit

          /*///// Libraries jquery & bootstrap libraries ///////*/

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

 <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
 <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />

 <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>

  /*///// relevant HTML: Targets (pop1,2,3) & Triggers (Previous & Next buttons) ///////*/

        <a  href="#" id="pop1" class="btn" data-content="GREAT CONTENT3" data-original-title="Gamification 1/3">
        </a>

        <a  href="#" id="pop2" class="btn" data-content="GREAT CONTENT3" data-original-title="Gamification 3/3">
        </a>


        <a href="#" id="pop3" class="btn" data-content="GREAT CONTENT3" data-original-title="Gamification 3/3">
        </a>


<a href="#" id="NextBtn" class="btn btn-primary"> NEXT </a>

<a href="#" id="PreviousBtn" class="btn btn-primary"> PREVIOUS </a>



    /*///// CSS ///////*/

      var currentPopover = -1;
      var popovers = [];

     // Initialize all the popovers to be "manually" displayed.
   popovers.push($("#pop1").popover({ trigger: 'manual' }));
   popovers.push($("#pop2").popover({ trigger: 'manual' }));
   popovers.push($("#pop3").popover({ trigger: 'manual' }));


    // On each button click, hide the //currently displayed popover
    // and show the next one.



    $("#NextBtn").click(function() {
    if (currentPopover >= 0) {
    popovers[currentPopover].popover('hide');
    }

    currentPopover = currentPopover + 1;
    popovers[currentPopover].popover('show');


    });


    $("#PreviousBtn").click(function() {

    popovers[currentPopover].popover('hide');


    currentPopover = currentPopover  -1;
    popovers[currentPopover].popover('show');


    });

Answer 1

我很久以前也遇到過類似的問題。 這是我解決的方法：我更改了導入的.css和.js文件的順序。 嘗試先加載引導程序所需的文件，然后再加載其他所有文件。 希望它也能為您服務！ 如果不是，則您的代碼有問題。

Answer 2

嘗試以正確的順序聲明CSS和JS，不要重復：

<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js" type="text/javascript"></script>