解决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 Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 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
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
由php if 想到的些问题
2008/03/22 PHP
php echo 输出字符串函数详解
2010/05/13 PHP
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
jQuery实现遍历复选框的方法示例
2017/03/06 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
python flask实现分页效果
2017/06/27 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
Python实现判断给定列表是否有重复元素的方法
2018/04/11 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
银行自荐信范文
2013/10/07 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
水电工程师岗位职责
2015/02/13 职场文书
社区节水倡议书
2015/04/29 职场文书
Java 在生活中的 10 大应用
2021/11/02 Java/Android
Python之matplotlib绘制饼图
2022/04/13 Python