<!--
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. linux 下route命令

    参考:http://blog.sina.com.cn/s/blog_67146a750100zoyi.html 为了让设备能访问另一个子网,需要在设备里增加路由到子网络,下面是一些资料.基本操作如下: ...

  2. ARM和STM32的区别及ARM公司架构的发展

    ARM和STM32的区别及ARM公司架构的发展 转:https://www.cnblogs.com/kwdeblog/p/5260348.html ARM是英国的芯片设计公司,其最成功的莫过于32位嵌 ...

  3. cenos7 修改hostname

    hostnamectl set-hostname Linuxidc 如何在CentOS 7上修改主机名 在CentOS中,有三种定义的主机名:静态的(static),瞬态的(transient),和灵 ...

  4. session 的工作原理以及使用细节和url编码

    /**********************************************模拟页面************************************************* ...

  5. nginx could not build the server_names_hash 解决方法

    nginx “nginx could not build the server_names_hash”解决方法 给一个服务器下增加了一些站点别名,差不多有20多个. 重启nginx时候,提示: cou ...

  6. eclipse maven 刷新报错

    问题描述: An internal error occurred during: "Loading descriptor for cmbc_wms.".java.lang.Null ...

  7. 2014新浪研发project师实习笔试（哈尔滨站）

    刚经历了新浪笔试,写篇博客记录一下下.方便以后查看. 一.基础题 1.栈和队列的异同点. 2.算法性能的4个评价标准. 排序算法中最稳定的算法. 那几个算法的空间复杂度是O(1)的. 3.线性表,平衡 ...

  8. iOS:苹果企业证书通过网页分发安装app

    本文转载至 http://blog.sina.com.cn/s/blog_6afb7d800101fa16.html 苹果的企业级证书发布的应用,是不用设备授权即可直接安装,并且不限设备上限.为了方便 ...

  9. php部分--头像上传预览

    前台页面显示 <style type="text/css"> #yl{ width:200px; height:300px; background-image:url( ...

  10. Grunt是什么，以及它的一些使用方法

    ♥什么是Grunt Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器.grunt是基于node 更多插件请访问:http://www.gruntjs.n ...