加載jQuery動畫的順序

我剛開始jQuery教程，我對jQuery動畫的加載順序有個基本問題。加載jQuery動畫的順序

單擊鏈接導致兩個警報和隱藏的動畫出現，當我使用下面的HTML代碼：，

<body> 
    <a href="http://jquery.com/">jQuery</a> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
     $("a").click(function(event){ 
     alert("As you can see, the link no longer took you to jquery.com"); 
     event.preventDefault(); 
     }); 
     $("a").click(function(event){ 
     event.preventDefault(); 
     $(this).hide("slow"); 
     }); 
    }); 
    </script> 
</body>

然而，當我在第二個點擊功能出的document.ready功能，所以代碼如下所示，彈出窗口出現，文本消失，但隱藏動畫不會發生。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery demo</title> 
    <style> 
    a.test { font-weight: bold; } 
    </style> 
</head> 
<body> 
    <a href="http://jquery.com/">jQuery</a> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
     $("a").click(function(event){ 
     alert("As you can see, the link no longer took you to jquery.com"); 
     event.preventDefault(); 
     }); 
    }); 
    $("a").click(function(event){ 
     event.preventDefault(); 
     $(this).hide("slow"); 
    }); 
    </script> 
</body> 
</html>

任何人都可以解釋爲什麼隱藏動畫只顯示第一個例子，而不是第二個？

來源

2012-10-18 Eric Baldwin

這是因爲第二個處理程序沒有連接到div上的所有錨點<a>標記。

$("a").click(function(event){ //This function will execute as the script loads 
           // and during this time, DOM might have been loaded yet 
    event.preventDefault(); 
    $(this).hide("slow"); 
});

但，通過包裝這裏面。

$(document).ready(function() { 

    // DOM is loaded 

});

您首先確保首先加載DOM，然後再附加處理程序。

來源

2012-10-18 05:55:14 Starx

這是因爲，在第二個示例中，最後一次呼叫click()位於ready處理程序之外。

執行該調用時，DOM尚未準備好，因此處理程序未被綁定，並且之後沒有動畫發生。

來源

2012-10-18 05:52:53

謝謝，我會研究什麼是DOM和處理綁定如何工作。 –

加載jQuery動畫的順序

回答

相關問題