我刚刚启动一个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>
但是，当我从文档中删除第二次单击功能时。dready函数，以使代码看起来如下所示，弹出窗口出现并且文本消失，但是隐藏动画不会发生。
<!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>
谁能解释为什么隐藏动画仅出现在第一个示例而不出现？
那是因为在您的第二个示例中，对click()的最后一个电话在ready处理程序之外。
发生该调用时尚未准备好DOM，因此处理程序没有绑定，此后没有动画。
这是因为第二个处理程序未连接到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，然后安装处理程序。