javascript - jquery $(document).ready()和$.load执行顺序问题
问题描述
先说说我应用的地方，就是网站的评论框，我打算用$.load动态的向后台获取评论数据，每有一条评论就用$.load加载一次（然后问题就来了）
首先这个问题我自己也已经研究过很多，$.load加载成功有执行函数的功能，如果我在这里为按钮绑定事件的话（因为我是要多次load,结果会导致一个按钮被重复绑定多次事件）。然后我也试过.on的方法（但是因为div的class名称是相同的，然后也会有被重复执行的问题）
所以现在我想明白ready和load到底谁先执行的问题,或者谁能给个更好的解决方案
test.html
<!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按钮，但是不会有任何反应，也就是说按钮并没有被绑定事件。
题主可以看下jQuery源码 如果题主js基础扎实的话,就比较容易明白ready和$.load到底谁先执行的问题
通过源码对比可知,$.load其实是一种ajax请求方法,也是默认异步执行的。而ready方法实际上就是jquery对DOMContentLoaded这个状态的一个封装.
题主可以试着用chrome dev tools试试,
尤其是第三步可以明显看到,index.html是最先加载的，因此此时的DOMContentLoaded事件已经触发,所以jquery封装的ready事件也触发了,由于$.load是异步执行的,所以浏览器解析的时候,$.load放在之后执行,通过断点也可以看出,ready下的console最先打印出数据,之后才是$.load加载的html。
另外上面一位说的完全可以解决题主的问题。
这篇关于javascript - jquery $(document).ready()和$.load执行顺序问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
