小提琴中的代碼在本地不起作用

我在小提琴中找到了一個簡單的工具提示：http://jsfiddle.net/6L9j0v5y/1，並試圖在本地使用它，但出現問題。我複製了http://jsfiddle.net/6L9j0v5y/1/show框架源，但也有相同的效果（頁面上只有按鈕，點擊時沒有任何反應）。小提琴中的代碼在本地不起作用

我（複製）創建文件：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <meta name="robots" content="noindex, nofollow"> 
    <meta name="googlebot" content="noindex, nofollow"> 
    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script> 
    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="/css/result-light.css"> 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

    <style type="text/css"> 
     [data-style=mypops] + .popover { 
     background: #4194ca; 
     } 
     [data-style=mypops] + .popover.bottom .arrow:after { 
      border-bottom-color: #4194ca; 
     } 
     [data-style=mypops] + .popover-content { 
     } 
     .popovermenu { 
      list-style: none; 
      padding: 0px; 
      margin: 0px; 
     } 
     .popovermenu li { 
     } 
     .popovermenu li a { 
      color: #fff; 
     } 
    </style> 
    <title></title> 
    <script type='text/javascript'>//<![CDATA[ 
     $(window).load(function(){ 
     $("#Pops").popover({ 
      html: true, 
      content: function() { 
       return $('#popover-content').html(); 
      } 
     }); 
     });//]]> 
    </script> 
</head> 

<body> 
    <br> 
<br> 
<br> 
<div class="col-sm-4"> 
    <button tabindex="0" class="btn btn-default" role="button" data-toggle="popover" data-trigger="focus" data-placement="bottom" id="Pops" data-style="mypops">Click Me</button> 
    <div id="popover-content" class="hide"> 
     <ul class="popovermenu"> 
      <li><a href="#">Action</a> 

      </li> 
      <li><a href="#">Another action</a> 

      </li> 
      <li><a href="#">Separated link</a> 

      </li> 
     </ul> 
    </div> 
</div> 

    <script> 
    // tell the embed parent frame the height of the content 
    if (window.parent && window.parent.parent){ 
    window.parent.parent.postMessage(["resultsFrame", { 
     height: document.body.getBoundingClientRect().height, 
     slug: "6L9j0v5y" 
    }], "*") 
    } 
</script> 
</body> 
</html>

有控制檯沒有錯誤，怎麼可能檢查爲何不起作用？

來源

2017-04-15 karl person

這是因爲在本地環境中，它會將資源URL視爲本地文件，因爲它在URL前沒有http/https協議。

這不是在做，不正確當一臺服務器上，它會正常工作，但是局部會引起問題。將腳本更改爲以下內容，並且工作正常。

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script> 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="/css/result-light.css"> 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

來源

2017-04-15 19:38:27

我把你的代碼在我的HTML文件和頁面沒有加載（問題是爲'code.jquery.com/jQuery的2.1.0.js'，我用''現在頁面加載正確，但也存在相同的問題（點擊按鈕時沒有任何反應） –

你是什麼意思在我的機器上進行本地測試時，它工作的非常好。 –

我再次嘗試，它的工作原理，可能是我的不好，對不起，非常感謝你的幫助 –

小提琴中的代碼在本地不起作用

回答

相關問題