2012年10月31日 星期三

HTML與JQuery處理Event事件的注意事項(二）

延續上一篇，我們來看一下解法，很簡單，只要把註冊函式的內容用$(document).ready(function()包起來就好了，請看下面程式碼的修改，你會發現，現在不論用Script 前區段或Script 後區段都正常了。這是因為$(document).ready(function()是告訴瀏覽器，當整份文件讀取好了之後，才來執行我的Ready()函式，這樣就不會有JQuery想取用，但是該ID物件尚未產生的情形。所以放哪裡都無所謂了。可以自己把<script>放到後段去試看看。

 有個觀念要弄清楚，<script>原本的用意，是在HTML需要程式動態產生內容地方，用來做出動態內容，或特殊效果，但是發展至今，JQuery是讓你方便透過ID或CLASS來取用HTML的元件（把一切都物件化了），然而衍生出了「取用的ID的物件尚未產生」的問題，也用了Ready()函式來解決，但是記得，這樣會讓HTML載入之後，就立刻執行Ready()的內容，所以這裡多半用來註冊函式與事件，或宣告函式，而不是直接去操作物件做什麼事情，除非你真的有這種需求，要在HTML載入之後，操作什麼物件。
<!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>

        $(document).ready(function() 
        {
           var divClickCount = 0;

            $(".btnCount").click(function(e)
            {
               $(".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" >Counter</button>
</body>
</html>
張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)