js异步回调

在前端的开发中，经常需要从后台获取数据，然后拼接dom，追加到页面中，并且还需要给元素绑定事件，有时候经常会出现明明绑定了事件，却发现事件并不起作用；

主要原因就是因为ajax是异步的，dom未渲染完成，绑定事件的代码就已经执行了，所以绑定不存在的元素肯定是没效果的

网上查了很多资料，下载总结主要的解决方法有两种：

一、使用事件代理

在页面已存在的元素上绑定事件，比如：ajax获取数据追加dom在ul标签上 ，就直接在ul上绑定事件

<span style="font-family:Tahoma;font-size:14px;"><span style="font-family:Verdana;"><ul id="ul">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <li>ddd</li>
    <li>eee</li>
</ul>
<script type="text/javascript">
     $('ul').click(function(e){
         alert($(e.target).index());
     })
</script></span>

</span>

二、使用回调

<span style="font-family:Verdana;font-size:14px;"> /****************** 异步回调 ************************/
    var asyncFun = function(callback) {
        $.ajax({
             ....
             success:function(){               <pre name="code" class="javascript">                    callback() ;//ajax异步先执行callback后执行

}
}) }; asyncFun(function() { $('ul').click(function(){//dom已经渲染完成 执行绑定事件 //todo}) console.log('这是异步回调'); // }); console.log('异步方法不会阻塞当前逻辑'); // </span>

这样写的好处是ajax始终是执行完成后，才执行后边的代码，可以保证绑定事件不会在dom未追加到页面中就绑定