JS代碼只有在放在正文中才有效

$("#btnCon").click(function() { 
    $('#con').slideToggle('slow'); 
    $('.tgg:not(#con)').hide(); 
});

當我把這段代碼放在html的頭部 - 它不起作用。
在身體 - 它的作品。
在一個單獨的文件中 - 它不起作用。
祕密在哪裏？JS代碼只有在放在正文中才有效

來源

2012-12-12 Alegro

，使其在頭工作做到這一點：

$(function(){ 
    $("#btnCon").click(function() { 
    $('#con').slideToggle('slow'); 
    $('.tgg:not(#con)').hide(); 
    }); 
});

的問題是，你要找的人ID爲btnCon元素，它準備了。通常的解決方案是將代碼嵌入到jQuery在DOM準備就緒時調用的回調中。

但是請注意，即使使用$(function(){ ... });始終建議，最好的做法一般是把你的代碼，通過

在一個單獨的JavaScript文件
在腳本元素在體內

來源

2012-12-12 15:11:51

謝謝。解決了，但是......我希望我能理解 – Alegro

「在一個單獨的javascript文件中」和「在身體末尾的腳本元素」不是不相交的。你可以做到這一點。我也看不出任何有利於身體結束的論點。 –

*「... while using $（function（）{...}）;'總是建議......」*由誰？如果您控制'script'元素的位置，則沒有理由使用'ready'事件。 –

嘗試在的document.ready

$(document).ready(function() { 

    $("#btnCon").click(function() { 
     $('#con').slideToggle('slow'); 
     $('.tgg:not(#con)').hide(); 
    }); 

});

速記 -

$(function() { 

    $("#btnCon").click(function() { 
     $('#con').slideToggle('slow'); 
     $('.tgg:not(#con)').hide(); 
    }); 

});

來源

2012-12-12 15:12:30 JSess

當我把在HTML的頭部這段代碼 - 這是行不通的。在身體 - 它的作品。在一個單獨的文件中 - 它不起作用。

它會在一個單獨的文件工作，如果你把script標籤包括在身體的最後文件，在結束</body>標記之前。

它不起作用的原因是，當它在head中時，代碼立即運行，並且元素還沒有存在，所以處理程序沒有連接起來。

這裏的正確答案是將代碼的script標記放在最後。這是YUI team和Google closure library team所倡導的。您還會看到有人使用jQuery的ready事件並將腳本放入head，並且確實有效，但如果您控制script標籤的位置，則無需執行此操作。

因此，在短期：

這工作：

<body> 
...content... 
<script> 
/* ...code... */ 
</script> 
</body>

和這個作品：

<body> 
...content... 
<script src="/the/script/file.js"></script> 
</body>

和這個作品：

<head> 
... 
<script> 
jQuery(function($) { // <== This is a shortcut for `ready` 
    /* ...code...*/ 
}); 
</script> 
</head> 
<body> 
...content... 
</body>

和這個作品如果腳本文件中的代碼位於ready處理程序中：

<head> 
... 
<script src="/the/script/file.js"></script> 
</head> 
<body> 
...content... 
</body>

來源

2012-12-12 15:13:10

請注意，不使用'ready'事件可能會產生微妙的錯誤，新手程序員不需要在最後保留腳本（或者更可能的是，不要將任何東西放在腳本之後）。 –

@JanDvorak：對不起，沒有按照這句話。 –

我的意思是，如果你不使用'ready'，新手程序員更可能在你的代碼中引入錯誤。 –

JS代碼只有在放在正文中才有效

回答

相關問題