2016-04-17 249 views
-1

我有以下代碼:爲什麼功能不起作用效果基本show jQuery的

<!DOCTYPE HTML> 
<html> 
<head> 
<script src="jquery-2.0.3.js"></script> 
<script> 
    $("div.a").click(function(){ 
     $(this).slideUp(); 
     }); 
</script> 
</head> 
<body> 
<div class="a"> <p> aaa</p></div> 
</body> 
</html> 

爲什麼不起作用?該函數與jquery文檔中的相同。

+0

@Juhana:我已經將該鏈接添加到了我的標準緊密鏈接庫,謝謝。 –

回答

2

腳本標記中的代碼在瀏覽器解析腳本標記後立即運行,然後解析器繼續執行HTML的其餘部分(您使用deferasync屬性)。所以你的代碼掛鉤事件處理程序運行之前該元素存在,所以沒有什麼可以連接。

移動script到HTML的年底,剛剛閉幕</body>標記之前:

<!DOCTYPE HTML> 
<html> 
<head> 
</head> 
<body> 
<div class="a"> <p> aaa</p></div> 
<!-- ...rest of page here... --> 
<script src="jquery-2.0.3.js"></script> 
<script> 
    $("div.a").click(function(){ 
     $(this).slideUp(); 
    }); 
</script> 
</body> 
</html> 

這樣一來,由HTML定義的元素爲腳本運行時的存在。更多這裏:YUI Best Practices for Speeding Up your Website

如果由於某種原因,你不能控制腳本去哪裏,第二好的選擇是使用jQuery的ready回調。

+0

爲什麼現成的方法是次佳? – bugwheels94

+0

它的工作原理,謝謝,但我不明白。那麼爲什麼CSS屬性在div html上工作,如果css是在html之前定義的。 –

+0

@ user1533609:因爲在頁面中提早放置腳本是一種反模式。如果劇本結束,'ready'就不必要了。 –

相關問題