最近做项目的时候遇见了一个问题，通过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. 13. 罗马数字转整数(C#)

    看到这道题,存在键值对,所以先建个泛型字典,把键值填进去. 由于这道题存在两个字符表示一个数字的情况,所以在for循环的时候判断一下,看看当前字符串中循环到的字符是否和下一个字符能够组成存在在字典里的 ...

  2. 面试官常问的Nginx的那几个问题？

    什么是Nginx? Nginx是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器 Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代 ...

  3. CountDownLatch（闭锁）、Semaphore（信号量）、CyclicBarrier

    一.CountDowmLatch(闭锁)(倒计数锁存器) CountDownLatch类位于java.util.concurrent包下,在完成某些运算时,只有其他所有线程的运算全部完成,当前运算才继 ...

  4. 利用windbg分析崩溃,句柄泄漏,死锁,CPU高,内存泄漏

    Windbg的一些简单使用命令 一.崩溃 1.  输入.ecxr;kbn得到崩溃的堆栈 其中源代码如下 2.  查看堆栈和源代码,发现第0帧导致崩溃,代码也是本地代码 输入.frame  0,切到第0 ...

  5. 最好用的koa2+mysql的RESTful API脚手架，mvc架构，支持node调试，pm2部署。

     #基于webpack构建的 Koa2 restful API 服务器脚手架    这是一个基于 Koa2 的轻量级 RESTful API Server 脚手架,支持 ES6, 支持使用TypeSc ...

  6. HTML学习 day03

    表单 表单   表单:表单域:包含了处理表单数据所用的程序的URL以及数据提交到服务器的方法.     表单控件:(对象.元素):包含了文本框.密码框.隐藏.多行文本框(文本域).复选框.单选框.下拉 ...

  7. 顺F速运，你被爱加M坑了

    - 加密情况 首先我们到顺F官网,下载顺F速运APP,当然,是Android版,毕竟穷. 接下来,得看看怎么用,当然顺便用Wireshark抓包,点那个显眼的立即登录按钮. 使用手机号登录,随便敲敲, ...

  8. [20190821]关于CPU成本计算.txt

    [20190821]关于CPU成本计算.txt --//有人问链接http://blog.itpub.net/267265/viewspace-2653964/中CPU成本如何计算的,实际上一般在优化 ...

  9. [Go] golang实现mysql连接池

    golang中连接mysql数据库,需要使用一个第三方类库github.com/go-sql-driver/mysql,在这个类库中就实现了mysql的连接池,并且只需要设置两个参数就可以实现 一般连 ...

  10. [Go] tcp服务下的数据传递

    go中实现一个tcp服务,首先是要监听端口,接收请求,这个地方会被阻塞等待当客户端连接过来,会开一个grountine去处理这条客户端的tcp连接,因此可以同时处理多条连接 在连接中,要循环的去读取客 ...