最近做项目的时候遇见了一个问题，通过jq将动态节点绑定到dom节点上，并且为动态节点绑定方法，此方法再次为动态节点添加动态节点，但在刷新之后，动态节点上的方法失效了，过程为：创建动态节点->动态节点绑定方法->添加动态节点->刷新后点击动态节点方法失效。

<!DOCTYPE html>
<html>
<head></head>
<body>
　　<div id="liData">

　　</div>
</body>
</html>

1、首先通过ajax获取到管理员管理多少个班级
-------------------
| 班级1            |
-------------------
| 班级2            |
-------------------
|                      |
|                      |
|                      |
|                      |
|                      |
|                      |
-------------------

...ajax
success: function (res) {
　　for (i = 0; i < res.data.length; i++) {
　　　　var collegeList = '<ul class="......">' +
　　　　　　　　　　　　　　'<li class="......">' +
　　　　　　　　　　　　　　　　'<a class="......" onclick="getPro(\''+res.data[i].ID+'\')">' + res.data[i].FullName + '</a>' +
　　　　　　　　　　　　　　　　'<div class="......" id="' + res.data[i].ID + '">' +

　　　　　　　　　　　　　　　　'</div>'
　　　　　　　　　　　　　　'</li>' +
　　　　　　　　　　　　'</ul>';
　　$("#liData").append(collegeList);
}
......

2、点击对应班级添加班级学生
--------------------
| 班级1(active) |
--------------------
| 学生1 　　     |
| 学生2 　　     |
| 学生3             |
| 学生4             |
| 学生...            |
-------------------
| 班级2             |
|     　　　　　 |
--------------------

Function getPro(id){
...ajax
success: function (ress) {
　　for (j = 0; j < ress.data.length; j++) {
　　　　var list = '<li class="...... ">' +
　　　　　　　　　　'<a class="......">' +
　　　　　　　　　　　　'<p class="......">姓名：' + ress.data[j].StudentName + '</p>' +
　　　　　　　　　　　　'<p class="......">学号：' + ress.data[j].StudentID + '</p>' +
　　　　　　　　　　　　'<p class="......">性别：' + ress.data[j].Sex + '</p>' +
　　　　　　　　　　　　'<p class="......">院系：' + ress.data[j].College + '</p>' +
　　　　　　　　　　　　'<p class="......">专业：' + ress.data[j].ProfessionalName + '</p>' +
　　　　　　　　　　　　'<p class="......">班级：' + ress.data[j].OrganName + '</p>' +
　　　　　　　　　　'</a>' +
　　　　　　　　'</li>';
　　$("#" + id+ "").append(list);
　　}
}
}
......

3、刷新后会发现，点击班级加载不出学生来，于是采用同步加载的方式勉强实现

...ajax
success: function (res) {
　　for (i = 0; i < res.data.length; i++) {
　　　　var OrganID = res.data[i].ID;
　　　　var collegeList = '<ul class="......">' +
　　　　　　　　　　　　　　'<li class="mui-table-view-cell mui-collapse">' +
　　　　　　　　　　　　　　　　'<a class="......">' + res.data[i].FullName + '</a>' +
　　　　　　　　　　　　　　　　'<div class="......" id="' + res.data[i].ID + '">' +

　　　　　　　　　　　　　　　　'</div>'
　　　　　　　　　　　　　　'</li>' +
　　　　　　　　　　　　'</ul>';
　　　　$("#liData").append(collegeList);
　　　　$.ajax({
　　　　　　......
　　　　　　async: false,//同步，但并非好办法
　　　　　　success: function (ress) {
　　　　　　　　for (j = 0; j < ress.data.length; j++) {
　　　　　　　　　　var list = '<li class="...... ">' +
　　　　　　　　　　　　　　　　'<a class="......" onclick="showInfo(' + ress.data[j].StudentID + ')">' +
　　　　　　　　　　　　　　　　　　'<p class="......">姓名：' + ress.data[j].StudentName + '</p>' +
　　　　　　　　　　　　　　　　　　'<p class="......">学号：' + ress.data[j].StudentID + '</p>' +
　　　　　　　　　　　　　　　　　　'<p class="......">性别：' + ress.data[j].Sex + '</p>' +
　　　　　　　　　　　　　　　　　　'<p class="......">院系：' + ress.data[j].College + '</p>' +
　　　　　　　　　　　　　　　　　　'<p class="......">专业：' + ress.data[j].ProfessionalName + '</p>' +
　　　　　　　　　　　　　　　　　　'<p class="......">班级：' + ress.data[j].OrganName + '</p>' +
　　　　　　　　　　　　　　　　'</a>' +
　　　　　　　　　　　　　　'</li>';
　　　　　　　　$("#" + OrganID + "").append(list);
　　　　　　　　}
　　　　　　}
　　　　})
　　}
}

4、网上找了很多解决方案，学习了委托,其作用在于
1）提高性能
　　对于多个相同的操作，如果足一操作，会影响性能
2）重复事件
　　新添加了元素还要触发之前的事件，而之前事件已经执行完，导致不再触发(我的错误就属于此类)
　　$("...").click(function(){
　　　　let list='<button class="btn">jq添加节点</button>';
　　　　$("...").append(list);
　　})

　　$("btn").click(function(){
　　//方法无效
　　})

　　$("父节点").on('click','button',function(){
　　　　//通过事件委托完成，有效
　　})

ps:当时很想明白我犯的错误的原理，但网上全是例子，没有详细说明原因，很是苦恼，最后找到一个讲解比较详细还很通俗易懂的帖子，分享给大家：
https://blog.csdn.net/a_csdner/article/details/76164986

小结：
$('...').bind('click',function(){
　　//这就是事件不委托，每个按钮有自己的事件
})
$('#btn').delegate('.button','click',function(){
　　//这就是事件委托，
})
$('#btn').undelegate('.button','click')//取消绑定

JQ动态生成节点绑定事件无效问题的更多相关文章

  1. jQuery使用on()绑定动态生成元素的事件无效

    jquery on()方法是jquery1.7+后才使用的 由于需求:动态添加了以下代码 <tr class="pj" data-val="no"> ...

  2. jQuery1.9之后使用on()绑定 动态生成元素的 事件无效

    来自互联网: 需要绑定a的父级元素(此元素必须为静态元素,不是后来动态生成的),然后设定on()方法的selector参数才行: $('p').on('mouseenter', 'a', functi ...

  3. 关于 js 动态生成html 绑定事件失效的问题

    在实际问题中,也只到使用新版jq 的on 事件 进行动态元素的绑定: 是这样 (但是依然没有效果——): $('dom节点').on('click',function(){}) 之后经过查阅发现:正确 ...

  4. 关于动态生成dom绑定事件失效的原因

    之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试 ...

  5. Vue2.x与bootsrap-table动态添加元素和绑定事件无效

    一.问题:     最近在使用vue与bootstrap-table结合生成表格时,按以前的经验----每列数据可用formatter:function(value,row,index){}进行一些其 ...

  6. jQuery1.9及其以上版本中动态元素on绑定事件无效解决方案

    jQuery 1.9/2.0/2.1及其以上版本无法使用live函数了,然而jQuery 1.9及其以上版本提供了on函数来代替.本文讲解了jQuery on函数的使用方法,以及在使用jQuery函数 ...

  7. jquery 动态创建的元素，绑定事件无效之解决方法

    今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...

  8. 如果dom节点是动态添加进页面的，在页面节点绑定事件如何解决的问题。

    如果dom节点是动态添加进页面,想在节点绑定事件,传统的做法就是遍历节点,但会出现问题,也肯能有其他的办法,突然想到 可以依据事件冒泡,这样就不惧页面后添加节点而不响应事件的问题.比较结实.示例代码如 ...

  9. jquery生成元素注册事件无效，及事件委托的使用

    在页面加载完成之后,我们在页面操作用js生成html代码到页面,动态的添加元素带页面上 但是,这里可能很多人就必须碰到的一个问题就出现了,当你之后动态添加了元素到页面上,发现这个元素的绑定事件无效,如 ...

随机推荐

  1. Python 爬取大众点评 50 页数据，最好吃的成都火锅竟是它！

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 胡萝卜酱 PS:如有需要Python学习资料的小伙伴可以加点击下方链 ...

  2. js清除定时器注意点

    如何这篇文章所述:https://www.cnblogs.com/mmykdbc/p/7418575.html js多次调用创建定时器的函数,会使定时器速度越来越快,多次调用定时器的使用场景比如:监听 ...

  3. scala 语法速查

    摘自官网 variables   var x = 5 Good x = 6 Variable. val x = 5 Bad x = 6 Constant. var x: Double = 5 Expl ...

  4. 比hive快10倍的大数据查询利器presto部署

    目前最流行的大数据查询引擎非hive莫属,它是基于MR的类SQL查询工具,会把输入的查询SQL解释为MapReduce,能极大的降低使用大数据查询的门槛, 让一般的业务人员也可以直接对大数据进行查询. ...

  5. Python正则表达式中re.S作用

    re.S的作用: 不使用re.S时,则只在每一行内进行匹配,如果存在一行没有,就换下一行重新开始,使用re.S参数以后,正则表达式会将这个字符串看做整体,在整体中进行匹配 对比输出结果: import ...

  6. 2019徐州网络赛 H.function

    题意: 先有\(n=p_1^{k_1}p_2^{k_2}\cdots p_m^{k_m}\),定义\(f(n)=k_1+k_2+\cdots+k_m\). 现在计算 \[ \sum_{i=1}^nf( ...

  7. 2. Vue - 初始

    一.vue简单介绍 1. vue定义 ​ vue是一套用于构建用户界面的渐进式框架.vue被设计为可自底向上逐层应用,vue的核心只关注视图层:vue的特点是数据驱动视图,可直接修改数据,不用再手动编 ...

  8. 三、排序算法总结一（冒泡排序，插入排序，选择排序）（C++版本）

    一.引言 对于各种排序算法也算是有了一定的了解,所以这里做一个总结. 二.冒泡排序法. 这是比较经典的排序算法,主要是通过内外两层的循环比较,使得乱序变为顺序. 下面是一个测试代码 #include ...

  9. DOM的重绘和回流及代码性能优化

    1.DOM的重绘和回流Repaint&Reflow 1.1重绘:元素样式的改变(但宽高.大小.位置等不变) 如outline.visibility.color.background-color ...

  10. python3.5.3rc1学习九：正则表达式

    # 正则表达式 ''''' 正则表达式是有一些特殊字符组成,能够帮你找到一些符合一定规则的字符串 先来了解几个符号所代表的意思 \d 匹配所有的数字 \D 匹配所有,但是数字除外 \s 空格 \S 匹 ...