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

最新推荐文章于 2021-01-13 19:23:04 发布

xuxinwen32

最新推荐文章于 2021-01-13 19:23:04 发布

阅读量492

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/xuxinwen32/article/details/78732626

版权

前端专栏收录该内容

40 篇文章 1 订阅

订阅专栏

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

例：有两个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>