jQuery中动态生成数据使用on绑定无效的问题；

来源：互联网发布：淘宝怎么提前收款编辑：程序博客网时间：2024/06/06 18:59

在工作当中，遇到数据需要动态生成绑定，然而遇到一个很怪异的现象；

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

我用F12打开控制台，在tab2页中，做交互操作的时候发现,Elements中我需要在tab1中操作的元素动态的发生了变化，我每操作一次，tab1页中动态生成的数据就重新渲染了一遍，那么就可以理解为什么我直接绑定动态生成的数据的class类名的时候无效了，因为我绑定的早已经不是初始化页面的元素了，在我操作tab2页面的时候tab1页面的数据已经动态渲染N遍了，所以解决的办法就是作用在动态元素的静态父元素上面进行事件委托；废话不多说，简单写了一个小demo，希望对同样遇到困惑的童鞋有所帮助~

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script></head><body><div class="parentClass">    <div class="children">on动态生成数据</div>    <div class="children">on动态生成数据</div>    <div class="children">on动态生成数据</div></div><script>    //不推荐，动态绑定的时候绑定事件不生效；    $(function(){        $('.children').on('click', function(){            console.log($(this).index());        })    })        //推荐，事件委托绑定在静态元素的父元素上面 class="parentClass"    $(function(){        $('.parentClass').on('click', '.children', function(){            console.log($(this).index());        })    })</script></body></html>

阅读全文

0 0