jQuery的不js文件

正常工作，我有以下的jQuery腳本在一個盒子裏jQuery的不js文件

$('#myfield').keyup(function() { 
    var left = 250 - $(this).val().length; 
    if (left < 0) { 
     left = 0; 
    } 
    $('#counter').text('put: ' + left); 
});

如果我它的工作原理後場右側把這個代碼來算的人物，但我想外部化這一個js文件..所以我複製這在myscript.js 然後做到這一點：

<script language="JavaScript" type="text/javascript" src="script/myscript.js"></script>

和它的作品...問題是這種調用myscript.js只會工作，如果我在同一聲明它現場（這是在頁面的底部）..但我想包括它在頂部與一個如果我這樣做，這將無法正常工作，因爲我會得到一個「'null'爲空或不是對象」。

所以我試圖把它放在文檔準備好，但即使我沒有得到一個錯誤沒有任何反應，因爲在..功能似乎並沒有執行。

$(document).ready(function(){ 
//function here 
});

有什麼建議嗎？

來源

2013-04-10 Klam

你的html中是否包含jquery？ – jrummell 2013-04-10 14:01:44

你應該在jquery後包含你的腳本 – 2013-04-10 14:02:20

是的，它位於頂部 – Klam 2013-04-10 14:02:29

您的選擇器應該是$('#myfield')而不是$('$myfield')。並保持文檔就緒功能。

編輯：

無論是在外部JS文件，或在同一文件中不應有任何區別。包含代碼的位置確實有所作爲。我通常在<head>中包含我所有的JS腳本。它應該包裝在$(function() { ... });中，以便它在DOM加載之前不執行。

看看this jsFiddle。請注意，如果您更改了onDomready/onLoad/No wrap-head/No wrap - body之間的左側框架中的下拉列表，這會更改代碼是否工作。如果你把它設置爲onDomready，生成的代碼看起來是這樣的，它的工作原理：

<html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     <title> - jsFiddle demo</title> 
     <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> 
     <link rel="stylesheet" type="text/css" href="/css/result-light.css"> 
     <script type="text/javascript"> 
     $(function(){ 
      $('#myfield').keyup(function() { 
       var left = 250 - $(this).val().length; 
       if (left < 0) { 
        left = 0; 
       } 
       $('#counter').text('put: ' + left); 
      }); 
     }); 
     </script> 
    </head> 
    <body> 
     <input type="text" id="myfield"> 
     <p id="counter">put: 246</p> 
    </body> 
</html>

請記住這樣一個事實，JS代碼是直接在頭與在外部JS文件應該是沒有這個例子的差異。如果你用帶有相同JS代碼的外部包含替換了<script>標籤，並將它留在同一個地方，它的工作原理也是一樣的。

如果這仍然不適合你，那麼我建議你做一個你自己的jsFiddle來證明你的問題。

來源

2013-04-10 14:03:49 Travesty3

是的，錯字，更正..它已經在準備好的功能，我重新寫了那些不知道該文件準備好相當於「$（function（）{」 – Klam 2013-04-10 14:17:17

「JS代碼是直接在頭上，而不是在外部JS文件中」問題是而不是內部和外部，因爲它在底部工作是一樣的，正如你所說我是把腳本調用放在頂部還是底部，問題的真正原因是把它放在頂部，所有其他的js調用都沒有'即使把它放在「準備好」裏面也行不通。我似乎無法使用那個小提琴e網站，我得到一個'編輯器'爲空或不是對象 – Klam 2013-04-10 15:16:09

如果即使jsfiddle不起作用，我願意猜測這是您的瀏覽器的一個問題，特別是如果您無法產生問題的演示。 – JJJ 2013-04-10 16:31:10

您面臨的問題是，當代碼位於HTML文件中時，將在呈現字段後執行代碼，但代碼位於文件中時不再是這種情況。

所以要解決這個問題，只有在確定該字段已經插入到DOM中後，才應該設置您的keyup事件。

這通常是通過封閉與處理程序代碼爲$(document).ready()事件，像這樣做：

$(document).ready(function(){ 
    $('#myfield').keyup(function() { // note #myfield instead of $myfield 
     var left = 250 - $(this).val().length; 
     if (left < 0) { 
      left = 0; 
     } 
     $('#counter').text('put: ' + left); 
    }); 
});

這將確保文檔中的所有元素都被渲染後，你的代碼運行，你可以與他們進行互動。

您可能還想看看jQuery文檔ready()。

來源

2013-04-10 14:04:49 kgr

這就是我在我的帖子中說的那個代碼正是我所擁有的，並且我得到了我上面提到的錯誤信息......我想我應該改變「$（function（）{ 」與「$（document） .ready（function（）{「因爲人們似乎沒有意識到它們是等價的 – Klam 2013-04-10 14:11:07

是的，我沒有意識到這一點 - 對不起。無論如何，你是否有一些行號和/或行內容與'''null '是空還是不是對象'？否則我們不知道哪部分錯誤涉及到代碼... – kgr 2013-04-10 16:33:53

我想這是#myfield
底部加載JavaScript始終是更好
是

$（文件）。就緒（函數（）{}

來源

2013-04-10 14:05:33 mlwacosmos

'$（function（）{}）'是一樣的東西，除非jQuery版本真的很舊。 – JJJ 2013-04-10 14:06:29

我試過$（document）.ready（function（）{}也是第一個...同樣的問題，我讀它相當於$（function（）反正我不知道是否最好包含javascripts底部，我總是看到他們在頂部，我想把它與所有其他電話，看起來有點奇怪，包括它在t他自己底下。 – Klam 2013-04-10 14:07:35

http://robertnyman.com/2008/04/23/where-to-include-javascript-files-in-a-document/ – mlwacosmos 2013-04-10 14:12:52

jQuery的不js文件

回答

相關問題