javascript - jquery $(document).ready()和$.load执行顺序问题-PHP中文网问答

先说说我应用的地方，就是网站的评论框，我打算用$.load动态的向后台获取评论数据，每有一条评论就用$.load加载一次（然后问题就来了）

首先这个问题我自己也已经研究过很多，$.load加载成功有执行函数的功能，如果我在这里为按钮绑定事件的话（因为我是要多次load,结果会导致一个按钮被重复绑定多次事件）。然后我也试过.on的方法（但是因为p的class名称是相同的，然后也会有被重复执行的问题）
所以现在我想明白ready和load到底谁先执行的问题,或者谁能给个更好的解决方案

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery.js"></script>
</head>
<body>
<p id="test2"></p>
<script>
    $('#test2').load('test2.html');
    $(document).ready(function(){
        $('#btn').click(function(){
            alert('绑定成功');
        });
    });
</script>

</body>
</html>

接下来是test2.html

<button id="btn">test2</button>

这样之后点击test2按钮，但是不会有任何反应，也就是说按钮并没有被绑定事件。

全部回复(2)

PHP中文网2017-04-11 09:25:01 2楼

题主可以看下jQuery源码如果题主js基础扎实的话,就比较容易明白ready和$.load到底谁先执行的问题

$.load
ready
DOMContentLoaded

通过源码对比可知,$.load其实是一种ajax请求方法,也是默认异步执行的。而ready方法实际上就是jquery对DOMContentLoaded这个状态的一个封装.

题主可以试着用chrome dev tools试试,

尤其是第三步可以明显看到,index.html是最先加载的，因此此时的DOMContentLoaded事件已经触发,所以jquery封装的ready事件也触发了,由于$.load是异步执行的,所以浏览器解析的时候,$.load放在之后执行,通过断点也可以看出,ready下的console最先打印出数据,之后才是$.load加载的html。

另外上面一位说的完全可以解决题主的问题。

赞 +0

添加回复

PHP中文网2017-04-11 09:25:01 1楼

load是异步的，它在执行load的同时，也会执行ready里面的内容，如果要成功绑定的话，可以这样写：

$('#test2').load('test2.html','',function(){
    $('#btn').click(function(){
        alert('success');
    })
})