• js/jq 动态添加的元素不能触发绑定事件解决方案


    <!--
    Copyright 2017-10-27, Jachin
    QQ: 381558301
    Email: 381558301@qq.com

    请看看你们的版本并对号入座:
    jquery1.6版本以下都不支持on委托事件
    jquery1.3 至 jQuery1.8版都支持live委托事件
    jquery1.9 以后的版本不支持live委托事件,但是on事件可以替代live

    jquery1.3版本以下的(不包括jquery1.3),是时候更新你的jquery版本了。因为 无解无解无解无解无解无解

    如果jquery版本是在1.3-1.8之间的话,js/jq动态添加的元素触发绑定事件的解决方法(不建议用on事件,因为1.6版本以下不支持on事件,会报错)

    click例子
    $('element').live('click',function(){})
    element可以是动态生成的元素,可以是它的类或者id
    1
    2
    3
    如果jquery版本是在1.9或者更高的话,live委托事件是被移除的,通过on来实现。js/jq动态添加的元素触发绑定事件的解决方法

    注意注意:如果页面同时存在低版本的jq(1.3-1.8)和高版本jq(jquery1.9以上)的话,live委托事件会被高版本移除,最后导致虽然有jquery版本是在1.3-1.8之间,使用了live事件,页面会报错。
    click例子
    $('父元素').on('click', '子元素', function(){})
    1
    2
    此时动态加载出来的元素一定要在$(‘父元素’)里面,否则绑定事件失效。换句话说,本应该绑定A元素,但是A元素是动态生成的,所以jq应该获取A元素的父元素来监听A元素是否发生click事件。
    举个例子
    <!DOCTYPE html>
    <html>
    <head>
    <title>js/jq 动态添加的元素不能触发绑定事件解决方案</title>
    </head>
    <script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script><body>
    <button>添加a标签</button>
    <div class="a-Box">
    <a href="javascript:;" class="alt">My name is</a><br>
    </div>
    </body>
    </html>
    <script type="text/javascript">
    $('.a-Box').on('click', 'a', function(){
    alert('Jachin');
    })
    $('button').click(function(){
    $('div').append('<a href="javascript:;" class="alt">My name is</a><br>');
    })
    </script>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    这样就可以完美解决动态加载出来的元素无法被监听。

    最后附上个版本的jquery
    <script src="https://cdn.bootcss.com/jquery/1.2.3/jquery.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.2.6/jquery.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.3.0/jquery.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.4.0/jquery.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.5.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.6.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.7/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.8.0/jquery-1.8.0.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.12.0/jquery.js"></script>
    <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.js"></script>
    <script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script>
    <script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

  • 相关阅读:
    Linux MySQL的root无法登录数据库ERROR 1045 (28000)
    Linux 命令行初始化MySQL数据库
    Centos6、Centos7防火墙基本操作整理
    文本三剑客之awk
    加密类型、数据加密解密过程以及CA创建
    Centos7启动流程及systemd中Nginx启动配置
    Linux任务计划
    Linux进程管理
    IP地址简介及Linux网络管理工具
    Linux脚本
  • 原文地址:https://www.cnblogs.com/xiaocaiyuxiaoniao/p/10487541.html
Copyright © 2020-2023  润新知