<!--
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>

js/jq 动态添加的元素不能触发绑定事件解决方案的更多相关文章

  1. jquery 动态添加的代码不能触发绑定事件

    今天发现jQuery对动态添加的元素不触发事件,比如blur.click事件等 参考文章证明了我的结论,并给出了原因及解决方案 原因:程序找不到动态添加的节点. 解决方案:在绑定父元素后的子元素 $( ...

  2. jq动态添加的元素触发绑定事件无效

    <div class='a'> <div class='b'> </div> 其中$('.a')是html页面的元素,$('.b')是jq动态添加的元素.$(&qu ...

  3. js添加的元素无法触发click事件

    动态生成的元素,使用.on绑定事件,比如$(document).on("click",".divclick",function(){})

  4. js JQ动态添加div标签

    function renderList(data){ var str = ''; for(var i = 0; i < data.length; i++){ // 动态添加li str += ' ...

  5. jquery动态添加的元素不能直接应用事件方法的时候

    对于由 jQuery 动态生成的元素,如用 jQuery 给元素添加 class,或者直接添加一对 p 标签,不能直接绑定常用的事件,如 click.因为这些元素属于动态生成,除非采用 onclick ...

  6. JS改变input的value值不触发onchange事件解决方案 （转）

    方法(一)(转载的网络资料) 需要了解的知识     首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onprope ...

  7. jquery动态添加的元素绑定的事件不生效的问题

    我们可以通过 $(document).on('click', '#xxx', callback) 这种形式解决. 原因,一般情况下,我们是通过 $('#xxx').click(callback) 这种 ...

  8. js动态追加的元素如何触发事件

    一般通过js或者jQuery动态添加的元素标签,通过该元素标签.class.id触发事件,是无效的.如下所示: <body> <input type="text" ...

  9. layui动态添加的元素click等事件触发不了的解决办法

    在页面加载完成时候 '.add_project' 元素是可以触发click时间的,当动态添加 '.add_project' 时候,新添加的元素却触发不了click事件,类似下面的写法: $(" ...

随机推荐

  1. 转: https 加密通信流程

    https 加密通信流程当用户在浏览器中输入一个以https开头的网址时,便开启了浏览器与被访问站点之间的加密通信.下面我们以一个用户访问https://qbox.me为例,给读者展现一下SSL/TL ...

  2. .NET Core R2安装及示例教程

    .NET Core R2安装及示例教程 Install for Windows - Visual Studio 2015 1 Download Visual Studio 2015 Make sure ...

  3. tcpdump命令使用详解

    阅读(226) 一:命令介绍: tcpdump,用简单的语言概括就是dump the traffic on a network,是一个运行在linux平台可以根据使用者需求对网络上传输的数据包进行捕获 ...

  4. 撸代码--linux进程通信（基于共享内存）

    1.实现亲缘关系进程的通信,父写子读 思路分析:1)首先我们须要创建一个共享内存. 2)父子进程的创建要用到fork函数.fork函数创建后,两个进程分别独立的执行. 3)父进程完毕写的内容.同一时候 ...

  5. 【DB2】DB2使用IMPORT命令导入含有自增长列的表报错处理

    1.启动数据库:db2start 2.创建数据库:create db TestDB using codeset gbk territory CN  collate using identity 3.连 ...

  6. Nook 2 Root

        最后我还是忍不住root了它,用了差一点够一个月 1.备份2.root 3.装软件=====================================================1. ...

  7. const的理解、const指针、指向const的指针

    1.const 的理解 const 是C语言的一个关键字,需要注意的是,const 关键字是把变量变为一个只读的变量(也就是不可以作为左值),绝对不是将这个变量变为常量.也就是说经过const 修饰的 ...

  8. Struts2学习九----------处理结果类型（input）

    © 版权声明:本文为博主原创文章,转载请注明出处 Struts2处理结果类型 - SUCCESS:Action正确的执行完成,返回相应的视图,success是name属性的默认值 - ERROR:表示 ...

  9. 现在有一个城市销售经理，需要从公司出发，去拜访市内的商家，已知他的位置以及商家的位置，但是由于城市道路交通的原因，他只能在左右中选择一个方向，在上下中选择一个方向，现在问他有多少种方案到达商家地址。给定一个地图map及它的长宽n和m，其中1代表经理位置，2代表商家位置，-1代表不能经过的地区，0代表可以经过的地区，请返回方案数，保证一定存在合法路径。保证矩阵的长宽都小于等于10。

    include "stdafx.h" #include<iostream> #include<vector> #include<algorithm&g ...

  10. mapreduce代码实现入门

    mapreduce代码主要包括三个类,map类.reduce类以及测试类! 以wordcount为例, map类为: static class WordMapper extends Mapper< ...