使用ajax动态加载html元素时，.on事件失效

原文：https://blog.csdn.net/xuxinwen32/article/details/78732626

例：有两个tab页，默认显示第一个tab1页，我需要动态生成的数据在第一个tab1页中，当我点击到了第二个tab2页，并且做了一些交互操作以后，切换到第一个tab1页，再去点击动态生成的数据按钮的时候无效，我用console都打印不出来东西；

问题：使用ajax动态加载html元素时，其绑定的.on事件失效。

原因：因为ajax是异步加载的，html还没加载完找不到绑定事件的元素

<div class="parentClass">
    <div class="children">on动态生成数据</div>
    <div class="children">on动态生成数据</div>
    <div class="children">on动态生成数据</div>
</div>

办法：

//不推荐，动态绑定的时候绑定事件不生效；
$(function(){
    $('.children').on('click', function(){
        console.log($(this).index());
    })
})
    
//推荐，事件委托绑定在静态元素的父元素上面 class="parentClass"或者document上面
$(function(){
    $('.parentClass').on('click', '.children', function(){
        console.log($(this).index());
    })

　　 或者

    $(document).on('click', '.children', function(){
        console.log($(this).index());
    })

})