<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery.js"></script>
</head>
<body>
<div id="test2"></div>
<script>
$('#test2').load('test2.html');
$(document).ready(function(){
$('#btn').click(function(){
alert('绑定成功');
});
});
</script>
</body>
</html>
接下来是test2.html
<button id="btn">test2</button>
这样之后点击test2按钮,但是不会有任何反应,也就是说按钮并没有被绑定事件。
ready
DOMContentLoaded
通过源码对比可知,$.load其实是一种ajax请求方法,也是默认异步执行的。而ready方法实际上就是jquery对DOMContentLoaded这个状态的一个封装。
尤其是第三步可以明显看到,index.html是最先加载的,因此此时的DOMContentLoaded事件已经触发,所以jquery封装的ready事件也触发了,由于$.load是异步执行的,所以浏览器解析的时候,$.load放在之后执行,通过断点也可以看出,ready下的console最先打印出数据,之后才是$.load加载的html。
load是异步的,它在执行load的同时,也会执行ready里面的内容,如果要成功绑定的话,可以这样写:
$('#test2').load('test2.html','',function(){
$('#btn').click(function(){
alert('success');
})
})