首先，我們先看一段用HTML處理Event的程式碼，將以下的程式碼貼到Dreamware或是文字編輯軟體，然後執行此HTML檔，在瀏覽器觀看其結果。然後把Script 前區段遮掉，改把Script 後區段打開，然後執行此HTML檔，在瀏覽器觀看其結果。會發現結果是一樣的，沒有任何差別，就是在按鈕Click之後，在DIV裡面顯示被按了幾下。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery (document).ready 教學</title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<!-- Script 前區段 -->
<script>
var divClickCount = 0;
function BtnClick()
{
$(".OutDiv").text( "Count = " + divClickCount );
divClickCount++;
}
</script>
<!-- CSS 區段 -->
<style type="text/css">
.OutDiv
{
width:600px;
height:400px;
border:solid;
cursor:n-resize;
}
</style>
</head>
<!-- Body 區段 -->
<body>
<div class = "OutDiv"></div>
<button class = "btnCount" onClick="BtnClick()" >Counter</button>
</body>
</html>
<!-- Script 區段 -->
<!--
<script>
var divClickCount = 0;
function BtnClick()
{
$(".OutDiv").text( "Count = " + divClickCount );
divClickCount++;
}
</script> -->
---------------------------------------------------------------------------------------------------------------
再來，我們改用JQuery來處理事件，改成在Script區段註冊Event函式，並完成函式內容。如以下程式碼，你會發現，這次執行之後，點按鈕不會在DIV顯示訊息了。如果把前區段遮掉，改把後區段打開，發現，就正常了。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery (document).ready 教學</title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script>
var divClickCount = 0;
{
$(".OutDiv").text( "Count = " + divClickCount );
divClickCount++;
});
</script>
<style type="text/css">
.OutDiv
{
width:600px;
height:400px;
border:solid;
cursor:n-resize;
}
</style>
</head>
<body>
<div class = "OutDiv"></div>
<button class = "btnCount" onClick="BtnClick()">Counter</button>
</body>
</html>
<!--
<script>
var divClickCount = 0;
{
$(".OutDiv").text( "Count = " + divClickCount );
divClickCount++;
});
</script>
-->
為什麼會這樣？這是因為，如果把Script寫在前面，則網頁載入時，會先載入Script這塊，但此時JQuery所要的ID元件根本就還沒產生，因為還沒執行到Body，所以才會異常。能有什麼解決的方式嗎？有，請看 HTML與JQuery處理Event事件的注意事項(二）
沒有留言:
張貼留言