讓jQuery在外部js文件中工作的問題

Question

我剛開始搞亂jQuery，並且運氣讓它在實際的aspx和html文件中工作，但我現在試圖讓它在外部js文件中工作。

在頭我的html文件，我有：

<!--Declare jQuery files--> 
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js"></script> 
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script> 
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1-vsdoc.js"></script> 

<!--Declare external java files--> 
<script type="text/javascript" src="javascript/SiteFunction.js"></script> 

我曾嘗試加入是爲了避免多文檔準備的情況下，它並沒有什麼影響無論哪種方式，其在不在家：

<script type="text/javascript"> 
    $(document).ready(function() { }); 
</script> 

在我的外部文件我有（它是一個if語句，我的功能只是字面上跳過所有的jQuery的.append和.animate的東西，如果它甚至不存在）：

 $(document).ready(function() { 
      $('<p>Test</p>').append("#" + newPage); 
     }); 

     jQuery(function($) { 
      alert(newPage); 
      $('<p>Test</p>').appendTo(newPage); 

      $(newPage).animate({ left: '0px' }, 2000, function() { 
       // Animation complete. 
       alert("animated newPage"); 
      }); 

      $(currentPage).animate({ right: '0px' }, 2000, function() { 
       // Animation complete. 
      }); 
     }); 

第一個jQuery append只是一個簡單的測試，看看我能否做簡單的事情。這全部包含在if語句中。我沒有收到任何錯誤，並且代碼是通過第一個jQuery準備好的，進入jQuery函數，我的alert（newPage）正在工作，但是我的alert（「animated newPage」）不是這樣，我知道我不是進入任何jQuery函數。

如果我的術語不正確，請原諒我，我剛剛在過去的3-4天裏開始使用Query。

我的變量，newPage和currentPage是包含在主html頁面中的div的id。我在同一個外部js文件中使用JavaScript訪問和操作它們很好。

我試着用第一個jQuery .append查看我是否需要在我的div id之前加上「＃」來引用字符串。

我已經嘗試過將它們包裝在jQuery中（function（$）{}）;.將它們留在獨立的位置，直接從我的html文件中運行。

來自html文件的工作代碼示例。文件頭中的設置相同

     $(myContent).animate({ 
         width: '0px' 
        }, mySpeed, function() { 
         // Animation complete. 
        }); 

        $('#contentH4').animate({ 
         width: myLeft 
        }, mySpeed, function() { 
         // Animation complete. 
        }); 

所以，我完全失敗了！

Answer 1

首先，您應該只包含jQuery 一次。你鏈接到的所有文件都有相同的JS代碼（除了一個被縮小，另一個有額外的註釋）。

這就是你需要：

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script> 

而且，這將有助於看到你定義newPage和currentPage。如果你可以鏈接到一個理想的演示頁面。

而且，這並沒有什麼：

<script type="text/javascript"> 
    $(document).ready(function() { }); 
</script> 

如果newPage只是一個ID，那麼這樣的：

$('<p>Test</p>').appendTo(newPage); 

應該是這樣的：

$('<p>Test</p>').appendTo('#' + newPage); 

Answer 2

當連接外部JavaScript/jquery文件中，type =「」不必聲明。

也讓它們加載在所有主體內容的底部以獲得更好的加載時間。

Answer 3

我使用嵌套MasterPages的ASP.NET，這對我來說是一個真正的問題。我正在收到document.ready已經失去了所有的時間。我想我需要一個更好的方法，我想到的是創建一個數組來保存我想要調用的所有函數，並在一個document.ready中循環訪問該數組，並按順序調用每個函數加入。如果您使用包含在不同的原因不同點很多外部文件，這將允許你這樣做沒有任何麻煩：現在

<!-- your external javascript file --> 
<script type="text/javascript"> 

    // create array to hold a list functions to run once 
    var oneTimeFunctions = new Array; 


    // create variable to store first function 
    var test1 = function() { $('<p>Test</p>').append("#" + newPage); }; 

    // add first function to the end of the array 
    oneTimeFunctions[oneTimeFunctions.length] = test1; 


    // create variable to store second function 
    var test2 = function() { 

     alert(newPage); 
     $('<p>Test</p>').appendTo(newPage); 

     $(newPage).animate({ left: '0px' }, 2000, function() { 
      // Animation complete. 
      alert("animated newPage"); 
     }); 

     $(currentPage).animate({ right: '0px' }, 2000, function() { 
      // Animation complete. 
     }); 

    }; 

    // add second function to the end of the array 
    oneTimeFunctions[oneTimeFunctions.length] = test2; 


    // call document.ready only once 
    $(function(){ 

     // call each function that was added to the oneTimeFunctions array 
     $.each(oneTimeFunctions, function(index, func) { func(); }); 

    }); 

</script>

，就像我說的，你可以拆分此爲多個外部文件。這只是表明它將如何按順序處理。你只需要首先創建數組，然後創建你的函數並將它們添加到你的各種外部文件中的數組中，最後，運行通過調用每個函數循環的document.ready部分。