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 函数中取出第二次单击函数以使代码如下所示时，会出现弹出窗口并且文本消失，但不会发生隐藏动画。 

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

谁能解释为什么隐藏动画只出现在第一个例子而不是第二个例子？

4

2 回答 2

1

这是因为，在您的第二个示例中，最后一次调用click()位于ready处理程序之外。

执行该调用时，DOM 可能尚未准备好，因此处理程序未绑定，之后也不会发生动画。

于 2012-10-18T05:52:53.570 回答
0

This is because the second handler is not get attached to all the anchor <a> tags on the 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");
 });

But, by wrapping this inside.

$(document).ready(function() {

    // DOM is loaded

});

You first make sure the DOM is loaded first, then attach the handler.

于 2012-10-18T05:55:14.707 回答