0

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関数から2番目のクリック関数を取り出して、コードが次のようになるようにすると、ポップアップが表示され、テキストが消えますが、非表示のアニメーションは発生しません。 

 <!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>

非表示のアニメーションが最初の例でのみ表示され、2番目の例では表示されない理由を誰かが説明できますか？

4

2 に答える 2

1

これは、2 番目の例では、最後の呼び出しがハンドラーclick()の外にあるためです。ready

その呼び出しが実行されたとき、DOM はまだ準備ができていない可能性があるため、ハンドラーはバインドされず、その後アニメーションは行われません。

于 2012-10-18T05:52:53.570 に答える
0

これは、2番目のハンドラーが<a>divのすべてのアンカータグにアタッチされていないためです。

 $("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-18T05:55:14.707 に答える