最近做项目的时候遇见了一个问题，通过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. Java生鲜电商平台-微服务入门与服务的拆分架构实战

    Java生鲜电商平台-微服务入门与服务的拆分架构实战 刚开始进入软件行业时还是单体应用的时代,前后端分离的概念都还没普及,开发的时候需要花大量的时间在“强大”的JSP上面,那时候SOA已经算是新技术了 ...

  2. 数据库-表操作(CRUD)

    1.数据增删改 2.单表查询 3.正则表达式 4.多表查询 ​ 笛卡尔积 ​ 内连接 ​ 外链接 ​ 子查询 一.数据的增删改 为什么不说查 因为查询语句 有很多细节 所以先从简单的说起 添加数据: ...

  3. Java自学-I/O 数据流

    Java 数据流DataInputStream ,DataOutputStream DataInputStream 数据输入流 DataOutputStream 数据输出流 步骤 1 : 直接进行字符 ...

  4. 数据类型和特殊类型-C#

    参考地址:https://blog.csdn.net/qiaoquan3/article/details/51380992 1.集合set:纯粹的数据集合 2.线性结构:一对一的,数组 3.树形结构: ...

  5. JS基础语法---循环语句之：for 循环 + 9个练习

    for循环 语法: for(表达式1;表达式2;表达式3){ 循环体; } 执行过程: 先执行一次表达式1,然后判断表达式2;如果不成立则直接跳出循环 如果表达式2成立,执行循环体的代码,结束后,跳到 ...

  6. vue快速复习手册

    1.基本使用 <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Vue的基本 ...

  7. Django和前端用ajax传输json等数据

    需要传输的是下图中所有的input中客户端设置的数据 整个页面是用js生成,代码不长,但是用了许多拼接,看起来开比较乱,页面的核心就是下面的部分,有一些关键参数部分就不放了,可以跳过这个 下面开始重点 ...

  8. [20190510]快速建立执行脚本.txt

    [20190510]快速建立执行脚本.txt --//上午在测试建立表空间备份时,浪费一点点时间.脚本如下:$ cat d10.sqldrop tablespace t01 including con ...

  9. 大话IdentityServer4之使用 IdentityServer4 保护 ASP.NET Core 应用

    这几天一直在研究IdentityServer4在asp.net core3.0中的应用,下面说说我的理解: 我们每一个.net core 项目大家可以理解为我新建了一个动物园或者植物园等,注册用户想要 ...

  10. jdoj 2171: Grape

    jdoj 2171: Grape 题意 题目大意 一个农场的葡萄架上挂着n串葡萄,若取一个葡萄就会获得与其相应的美味值.对于连续的k串葡萄,最多取b串,最少取a串, 问能够获得的最大美味值为多少 数据 ...