Question

这是疯了......我一直试图找出为什么我的popover代码在本地托管时不会，但在jsbin上工作正常。让我知道你们的想法，我为此疯狂。谢谢大家！

所以这是：

          /*///// 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文件的顺序。尝试加载第一个bootstrap所需的文件，然后加载其他所有文件。希望它也适合你！如果没有那么你的代码就出了问题。

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>

代码在本地托管，但在jsbin上工作时，Bootstrap Popover无效

2 个答案: