最近做项目的时候遇见了一个问题，通过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. PHP面试题2019年新浪工程师面试题及答案解析

    一.单选题(共28题,每题5分) 1.以下语句输出的结果是什么? A.3$a\$a3336 B.33\$a3336 C.$a$a\$a3336 D.3$a\$a333$a$a 参考答案:A 答案解析: ...

  2. Tomcat8史上最全优化实践

    Tomcat8史上最全优化实践 1.Tomcat8优化 1.1.Tomcat配置优化 1.1.1.部署安装tomcat8 1.1.2 禁用AJP连接 1.1.3.执行器(线程池) 1.1.4 3种运行 ...

  3. GDAL读取Shp问题解决：Unable to open EPSG support file gcs.csv

    在GIS软件的开发中,经常用到开源库GDAL读取Shp数据,当shp数据中包含投影信息时,可能会遇到“Unable to open EPSG support file gcs.csv”错误提示,该错误 ...

  4. IOS中的深拷贝和浅拷贝

    标签: 什么是深拷贝?什么是浅拷贝? 为什么经常看到字符串属性要这样定义,那个copy是神马意思? @property(nonatomic,copy)NSString* name; 为什么下面的写法是 ...

  5. ucoreOS_lab5 实验报告

    所有的实验报告将会在 Github 同步更新,更多内容请移步至Github:https://github.com/AngelKitty/review_the_national_post-graduat ...

  6. Ingo Molnar 的实时补丁

    一.简介 Ingo Molnar 的实时补丁是完全开源的,它采用的实时实现技术完全类似于Timesys Linux,而且中断线程化的代码是基于TimeSys Linux的中断线程化代码的.这些实时实现 ...

  7. qt md5加密，base64编码解码

    qt md5加密,base64编码解码 md5加密 QByteArray data = "12121221"; data += "asdfas"; QByteA ...

  8. [Go] 写文件和判断文件是否存在

    OpenFile得到一个File,然后调用它的Write,参数是字节切片Stat看看返回错误没有 package main import ( "fmt" "os" ...

  9. 如何使用DOM4j+xpath 解析

    1.首先去dom4j官网下载一个对应版本的JAR包 XML的配置文件 导入一个config.xml文件 下面是dom4j+xpath解析XML文件

  10. c# 第41节 异常处理

    本节内容: 1:捕获异常两种方式 2:处理异常的两种方式 3:实例处理异常 4:手动触发异常 5:预定义异常类有哪些 6:自定义异常 1:捕获异常 第一种 捕获:只能知道发生了异常 第二种捕获: 可以 ...