最近做项目的时候遇见了一个问题，通过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. SPA项目搭建及嵌套路由

    Vue-cli: 什么是vue-cli? vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,创建命令如下: vue init webpack xxx 注1:xx ...

  2. window启动webpack打包的三种方法

    1.在cmd终端执行 npx webpack命令 2.在package.json文件同级建立webpack.config.js文件,内容如下: const path = require('path') ...

  3. SAP MM 采购信息记录中价格单位转换因子的修改

    SAP MM 采购信息记录中价格单位转换因子的修改 如下采购信息记录, Order unit 跟 base UoM 一致,都是 PC. 采购价格是8849.56 CNY / 10000W, 由于业务人 ...

  4. wpf 的dispatcher

    wpf项目中后台代码调用界面控件时,会提示进程调用的错误. private Thread JxThread = null;  //定义线程 private DataLoading.Loading nL ...

  5. SRDC - ORA-1555 during Export: Checklist of Evidence to Supply (Doc ID 1682706.1)

    SRDC - ORA-1555 during Export: Checklist of Evidence to Supply (Doc ID 1682706.1) Action Plan 1. Exe ...

  6. springboot 使用 jedis 连接 Redis 数据库

    1. 在 pom.xml 配置文件中添加依赖 <!-- redis 依赖 --> <dependency> <groupId>org.springframework ...

  7. python简单面试题

    在这个即将进入金9银10的跳槽季节的时候,肯定需要一波面试题了,安静总结了一些经常遇到的python面试题,让我们一起撸起来. python面试题 1.求出1-100之间的和 # coidng:utf ...

  8. win10 anaconda3 python3.6安装tensorflow keras tensorflow_federated详细步骤及在jupyter notebook运行指定的conda虚拟环境

    本文链接:https://blog.csdn.net/weixin_44290661/article/details/1026789071. 安装tensorflow keras tensorflow ...

  9. 问题解决：import paddle.fluid出错：DLL load failed: 找不到指定的模块

    问题描述: 使用Pycharm编程,导入paddlepaddle库出错.即:import paddle.fluid出错:DLL load failed: 找不到指定的模块 解决方法: 补上缺失的DLL ...

  10. eslint代码规范检测

    1.如果在 vue init webpack projectname 时选择了eslint(Yes),则   npm uninstall eslint 2.在webpack.base.conf.js里 ...