jQuery中的事件在ready()方法里面和外面的区别？

Question

<script type="text/javascript">
$(document).ready(function(){
$("#id1").click(function(){
alert("click");
});
});
$("#id2").click(function(){
alert("click");
});
</script>
上面这两个click事件有什么区别吗？

Answer 1

有区别.

ready()方法意思是等整个页面的DOM树解析完毕执行.

而直接绑定方法是页面流从上往下解析到当前位置时执行. 这个时候不一定DOM加载完毕, 所以很可能出错.

而放在ready方法里面,就不会出错!

Answer 2

很简单，放到ready里面的方法是会等到页面所有的东西加载出来后才会去执行的，而放到外面的方法则是页面加载到这个位置的时候就会执行。下面一个例子：
<div id="d1"></div>
<script type="text/javascript">
$(document).ready(function(){
alert($("#d2").html());
alert("ready");
});
alert($("#d2").html());
</script>
<div id="d2">test</div>

我们可以看到，这是一段HTML代码片段，其中JQUERY的代码是嵌在2端HTML中间的，当页面加载到这段JS代码时，在ready里面的代码不会立即执行，而在外面的代码则会马上执行，但是这个时候d2这个DIV并没有加载出来，所以第一个弹出框的内容NULL，因为jquery找不到还未加载出来的DOM，等所有的代码加载好了后，ready里面的内容会开始执行，这个时候就会依次跳出test和ready。
再来说一下你说的这个2个click事件，同理，如果以id2为id的元素出现在这段js的后面，则你的点击事件不会被出发，而id1则没有这个问题。

Answer 3

你运行后很容易就会发现id1的会有效果，而id2的不会有效果 不会被执行，放在ready外面的方法都是用来被调用的方法，而不是单独执行的

$(document).ready(function(){
$("#id1").click(function(){
alert("click1");
});
$("#id2").click(function(){
aa()
});
});
function aa(){
alert("click2");
}

Answer 4

lifei6671正解