原文: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()); })
})