ReferenceError：jQuery未定義

我正在用PHP/MySQL構建CMS，到目前爲止使用jQuery將排序和篩選添加到表列。通常情況下，它的效果很好，但偶爾排序和篩選元素將不會加載 - 這隻會發生在我手動刷新頁面時（從未通過鏈接訪問它），並且有時只是。有些時候我可以在它發生之前刷新幾次，其他時間可以連續發生幾次。ReferenceError：jQuery未定義

當問題發生時，Firebug的控制檯告訴我一個或兩個以下：

的ReferenceError：jQuery是沒有定義

的ReferenceError：$沒有定義
$（文件）。就緒（函數（）{

（有時：類型錯誤：$（「的tablesorter」）的tablesorter不是一個函數）

當一切正常時，控制檯是空白的。

我的頭文件，它加載的CMS的所有頁面，始於：

<?php ob_start(); ?> 
<!DOCTYPE html> 
<html> 
<head> 
    <meta name="robots" content="noindex"> 
    <title><?=$pg_title." - ".$site_name;?> | Lucid <?=$ver_num;?></title> 
    <link href="/favicon.gif" rel="icon" /> 
    <link rel="stylesheet" href="css/styles.php" type="text/css" /> 
    <script src="js/jquery-1.8.3.min.js" async></script> 
    <script src="plugins/jquery-tablesorter/js/jquery.tablesorter.min.js" async></script> 
    <script src="plugins/jquery-tablesorter/js/jquery.metadata.js" async></script> 
    <script src="plugins/jquery-tablesorter/addons/pager/jquery.tablesorter.pager.min.js" async></script> 
    <script src="js/picnet.table.filter.min.js" async></script> 
</head>

然後在頁腳文件，我把各種功能：

<script async> 
    $(document).ready(function(){ 
     function validateNumber(event) { 
      var key = window.event ? event.keyCode : event.which; 

      if (event.keyCode == 8 || event.keyCode == 46 
      || event.keyCode == 37 || event.keyCode == 39) { 
       return true; 
      } 
      else if (key < 48 || key > 57) { 
       return false; 
      } 
      else return true; 
     }; 
     $('[class=sort-order]').keypress(validateNumber); 
     $(".tablesorter").tablesorter({ 
      textExtraction: 'complex' 
     }); 
     var options = { 
      filterDelay: 100, 
      clearFiltersControls: [$('.filter-clear')] 
     }; 
     $('.tablesorter').tableFilter(options); 
     $('input:not(.filter)').live("change", function() { 
      window.onbeforeunload = function() { return "Your changes have not been saved, if you leave the page you'll lose them" }; 
     }); 
    }); 
</script> 
</body> 
</html> 
<?php 
ob_flush(); 
?>

我知道，這是一個相當普遍的問題，但我覺得我已經嘗試了所有解決方案（包括這裏列出的那些：JQuery - $ is not defined）

我試過使用setTimeout來延遲加載除jQu最多一秒鐘 - 沒有幫助。

我試過檢查jQuery是否定義與if（jQuery） - 它總是。

Firebug的Net標籤顯示我的jQuery文件的狀態爲304 Not Modified，無論問題是否發生。

據我可以告訴我所有的拼寫和語法都很好，應該給予它大部分時間工作。

我試過從外部網站而不是本地加載jQuery - 沒有區別。

我應該指出，我使用XAMPP在本地開發CMS，而不是遠程服務器，所以我認爲這可能與我的apache配置有些不協調。然後我把所有東西都上傳到遠程服務器，發現問題更糟，這表明這與加載頁面的速度有關，也許是異步？但我不知道我還能做些什麼來確保在加載任何腳本之前加載jQuery ...

來源

2012-12-01 don_karnia

上的async attribute表示在下載和評估腳本之前HTML的解析可能會繼續。這意味着，隨後的腳本元素不能依賴於以前的評估 —這意味着jQuery插件後，你正在加載jQuery失敗，因爲jQuery尚未加載。

具體做法是：

<script src="js/jquery-1.8.3.min.js" async></script>

告訴你想要的腳本的瀏覽器，但不要讓事情等着呢。然後：

<script src="plugins/jquery-tablesorter/js/jquery.tablesorter.min.js" async></script>

說同樣的事情。這設置了一個競爭條件，這兩個腳本元素不再有任何順序，所以有時第二個會先被評估。由於第二個需要jQuery，所以失敗了。

要修復它，您需要刪除async屬性。如果您的目標是在不等待腳本的情況下使頁面渲染速度更快，請將所有腳本移動到body的末尾（例如，在</body>之前）。但是請注意，可以是表示在事件處理程序連接之前用戶嘗試與該頁面進行交互時的短暫時刻等。

來源

2012-12-01 11:36:17

輝煌，謝謝你，這樣一個簡單的修復。我承認我只是盲目跟隨Firebug的Page Speed工具，當它建議使用異步... –

ReferenceError：jQuery未定義

回答

相關問題