解决jQuery使用append添加的元素事件无效的问题


Posted in jQuery onAugust 30, 2018

jquery api官方的例子在新增的元素上添加事件

$(document).on("click",'#lyysb a',function(){
 if(!$(this).hasClass('cur')){
  $(this).addClass('cur');
 } else {
  $(this).removeClass('cur');
 }
});

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。

注意:使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。

提示:如需移除事件处理程序,请使用 off() 方法。

提示:如需添加只运行一次的事件然后移除,请使用 one() 方法。

*把事件绑定在docunmet就和原来的live方法没有区别了。原先的live()方法,处理函数是默认绑定在document对象上不能变的,如果DOM嵌套结构很深,事件冒泡通过大量祖先元素会导致较大的性能损失。而使用.on()方法,事件只会绑定到$()函数的选择符表达式匹配的元素上,因此可以精确地定位到页面中的一部分,而事件冒泡的开销也可以减少。

例如我会在zkdiv中动态添加多个class=”zk”的dom节点,也想对动态增加的节点绑定相同的事件则可以通过以下代码实现

<div id="zkdiv">
 <input type="button" value="展开" id="zk" class="zk"/> <br>
</div>

//展开按钮点击触发事件

$("#zkdiv").on("click",".zk",function(){
 console.log("on 点击一次");
});
var html2 = "<input type='button' class='zk' value='新生成的展开' />";
$("#zkdiv").append(html2);

*这样一来处理函数就绑定到#zkdiv的选择器上去了,事件冒泡导致的性能损失会大大降低(使用该方法时要确保.on前面的选择器能选择到对象 否则不起作用)

click是点击事件,但是在页面加载完之后,jquery事件新添加的元素,用click的话是无法获取元素的,这个时候要用on去获取元素事件,简单的说页面加载完成时候页面显示的元素可以用on,也可以用click,但是页面加载完成之后后期再追加的元素只能用on。

以上这篇解决jQuery使用append添加的元素事件无效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery操作css样式
May 15 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 #jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 #jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 #jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 #jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 #jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 #jQuery
JQuery扩展对象方法操作示例
Aug 21 #jQuery
You might like
PHP中的超全局变量
2006/10/09 PHP
php GeoIP的使用教程
2011/03/09 PHP
Views rows style模板重写代码
2011/05/16 PHP
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
PHP类的封装与继承详解
2015/09/29 PHP
JS 对象介绍
2010/01/20 Javascript
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
Python查找相似单词的方法
2015/03/05 Python
flask中的wtforms使用方法
2018/07/21 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
Python tkinter常用操作代码实例
2020/01/03 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
django项目中新增app的2种实现方法
2020/04/01 Python
python中判断文件结束符的具体方法
2020/08/04 Python
大韩航空官方网站:Korean Air
2017/10/25 全球购物
HEMA法国:荷兰原创设计
2019/02/21 全球购物
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
Android interview questions
2016/12/25 面试题
酒店服务与管理毕业生求职信
2013/11/02 职场文书
安全例会汇报材料
2014/08/23 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
董事长新年致辞
2015/07/29 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python
关于JavaScript回调函数的深入理解
2021/06/27 Javascript
nginx七层负载均衡配置详解
2022/07/15 Servers