zoukankan      html  css  js  c++  java
  • 使用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());
        })
    })

      

  • 相关阅读:
    将数据绑定通过图表显现
    d3.js初识
    Josn
    d3-tip.js
    Java知识点总结
    Javascript的学习
    Java的多线程学习
    day11
    day10
    day09
  • 原文地址:https://www.cnblogs.com/xi-li/p/15304884.html
Copyright © 2011-2022 走看看