<!--
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. 2017.2.12 开涛shiro教程-第七章-与Web集成

    2017.2.9 开涛shiro教程-第七章-与Web集成(一) 原博客地址:http://jinnianshilongnian.iteye.com/blog/2018398 根据下载的pdf学习. ...

  2. Performing User-Managed Database-18.7、Performing Complete User-Managed Media Recovery

    18.7.Performing Complete User-Managed Media Recovery 完毕一致性备份,把数据库恢复到当前的scn是最好的结果.能够恢复整个数据库.恢复单个表空间.或 ...

  3. java：可变参数(转载）

    http://12477787.blog.51cto.com/12467787/1887843 Java在1.5之后允许方法使用可变参数,可变参数的好处在于:它允许传递0个或者多个参数.比如原来有一段 ...

  4. storm - 可靠机制

    一 可靠性简单介绍                    Storm的可靠性是指Storm会告知用户每个消息单元是否在一个指定的时间(timeout)内被全然处理. 全然处理的意思是该MessageI ...

  5. C# 字节数组拼接的速度实验(Array.copy(),Buffer.BlockCopy(),Contact())

    无聊做了如题的一个算法的优劣性能比较,由于很多人都只关心结果,那么我先贴出结果如下: 由于我的测试数据量比较小,只能得出Array.Copy()和Buffer.BlockCopy()方法性能要好于Co ...

  6. VueJS样式绑定之内联样式v-bind:style

    我们可以在 v-bind:style 直接设置样式: 直接添加样式属性 HTML <!DOCTYPE html> <html> <head> <meta ch ...

  7. ie6中利用jquery居中

    1.利用jquery居中代码 <script type="text/javascript"> $hwidth=parseInt($(window).width()); ...

  8. Android----SharedPreferences(存储数据)

    SharedPreferences详解 我们在开发软件的时候,常需要向用户提供软件参数设置功能,例如我们常用的微信,用户可以设置是否允许陌生人添加自己为好友.对于软件配置参数的保存,如果是在windo ...

  9. YARN/MRv2 中基本术语介绍

    YARN/MRv2是下一代MapReduce框架(见Hadoop-0.23.0),该框架完全不同于当前的MapReduce框架,它在扩展性,容错性和通用性等方面更出色,据统计,Yarn有超过15000 ...

  10. Zend API：深入 PHP 内核

    Introduction Those who know don't talk. Those who talk don't know. Sometimes, PHP "as is" ...