Question

我有以下代码：

<!DOCTYPE HTML>
<html>
<head>
<script src="jquery-2.0.3.js"></script>
<script>
    $("div.a").click(function(){
        $(this).slideUp();
        });
</script>
</head>
<body>
<div class="a"> <p> aaa</p></div>
</body>
</html>

为什么不起作用？该函数与jquery文档中的相同。

Answer 1

脚本标记中的代码会在浏览器解析脚本标记之后立即运行，然后解析器继续使用HTML的其余部分（unles使用defer或async属性）。因此，连接事件处理程序的代码在元素存在之前运行，因此没有任何内容被连接起来。

将script移至HTML的 end ，就在结束</body>标记之前：

<!DOCTYPE HTML> <html> <head> </head> <body> <div class="a"> <p> aaa</p></div>  <script src="jquery-2.0.3.js"></script> <script> $("div.a").click(function(){ $(this).slideUp(); }); </script> </body> </html>

这样，HTML定义的元素在脚本运行时存在。更多信息：YUI Best Practices for Speeding Up your Website

如果由于某种原因你无法控制脚本的位置，那么第二个最好的选择就是使用jQuery的ready回调。

为什么函数不起作用slideUp jquery

1 个答案: