JQ动态生成节点绑定事件无效问题
最近做项目的时候遇见了一个问题,通过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动态生成节点绑定事件无效问题的更多相关文章
- jQuery使用on()绑定动态生成元素的事件无效
jquery on()方法是jquery1.7+后才使用的 由于需求:动态添加了以下代码 <tr class="pj" data-val="no"> ...
- jQuery1.9之后使用on()绑定 动态生成元素的 事件无效
来自互联网: 需要绑定a的父级元素(此元素必须为静态元素,不是后来动态生成的),然后设定on()方法的selector参数才行: $('p').on('mouseenter', 'a', functi ...
- 关于 js 动态生成html 绑定事件失效的问题
在实际问题中,也只到使用新版jq 的on 事件 进行动态元素的绑定: 是这样 (但是依然没有效果——): $('dom节点').on('click',function(){}) 之后经过查阅发现:正确 ...
- 关于动态生成dom绑定事件失效的原因
之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试 ...
- Vue2.x与bootsrap-table动态添加元素和绑定事件无效
一.问题: 最近在使用vue与bootstrap-table结合生成表格时,按以前的经验----每列数据可用formatter:function(value,row,index){}进行一些其 ...
- jQuery1.9及其以上版本中动态元素on绑定事件无效解决方案
jQuery 1.9/2.0/2.1及其以上版本无法使用live函数了,然而jQuery 1.9及其以上版本提供了on函数来代替.本文讲解了jQuery on函数的使用方法,以及在使用jQuery函数 ...
- jquery 动态创建的元素,绑定事件无效之解决方法
今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...
- 如果dom节点是动态添加进页面的,在页面节点绑定事件如何解决的问题。
如果dom节点是动态添加进页面,想在节点绑定事件,传统的做法就是遍历节点,但会出现问题,也肯能有其他的办法,突然想到 可以依据事件冒泡,这样就不惧页面后添加节点而不响应事件的问题.比较结实.示例代码如 ...
- jquery生成元素注册事件无效,及事件委托的使用
在页面加载完成之后,我们在页面操作用js生成html代码到页面,动态的添加元素带页面上 但是,这里可能很多人就必须碰到的一个问题就出现了,当你之后动态添加了元素到页面上,发现这个元素的绑定事件无效,如 ...
随机推荐
- mysql - 锁及事务的认识
mysql事务特性:一致性原子性隔离性持久性 //mysql 事务隔离级别 读未提交 读未提交的数据 读已提交 读已提交的数据 串行序列化 一个事务完成了再执行另一个事务 可重复读(数据库默认) 就算 ...
- C++ this指针的理解和作用
01 C++ 程序到 C 程序的翻译 要想理解 C++ 的 this 指针,我们先把下面的 C++ 代码转换成 C 的代码 class Car { public: int m_price; // 成员 ...
- Dynamics 365利用HTML页面创建实体记录并同步上传附件
我是微软Dynamcis 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...
- [转]Eclipse插件开发之基础篇(4) OSGi框架
原文地址:http://www.cnblogs.com/liuzhuo/archive/2010/08/18/eclipse_plugin_1_2_1.html 1. 什么是OSGi框架 OSGi(O ...
- 使用Azure进行自动化机器学习
什么是自动化机器学习? 自动化的机器学习,也称为 AutoML,让数据科研人员. 分析人员和开发人员,同时维护模型质量构建具有高缩放性. 效率和工作效率的机器学习模型. 自动化机器学习生成的机器学习模 ...
- vue项目关闭eslint校验
[前言] eslint是一个JavaScript的校验插件,通常用来校验语法或代码的书写风格.这篇文章主要介绍了vue项目关闭eslint校验,需要的朋友可以参考下 [主体] 简介eslint esl ...
- 浅谈AMD与CMD
AMD 是 RequireJS 在推广过程中对模块定义的规范化产出. CMD 是 SeaJS 在推广过程中对模块定义的规范化产出. 这些规范的目的都是为了 JavaScript 的模块化开发,特别是在 ...
- (Apache服务)个人用户主页功能
1.开启个人用户主页功能 (1)输入命令“vi /etc/httpd/conf.d/userdir.conf” (2)将第17行UserDir disabled前加一个# 将第24行UserDi ...
- ADB端口5037被占用 导致adb 停止工作
解决ADB端口占用问题 方式一 5037为adb默认端口,若5037端口被占用,打开cmd,输入以下指令, 1.查看占用端口的进程PID netstat -aon|findstr 5037 2. 通 ...
- 通过Python代码操作MySQL:
pymsql / MySQLdb pymysql支持 py2/py3 MySQLdb支持py2 ORM框架 django orm ( 自己对数据连接有优化机制 ) SQLAlchemy ( 自带数据库 ...