jquery动态生成dom(比如append)导致js事件无效
2023-09-27 14:21:28 时间
如果无效用这个方法: on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
<
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。
提示:如需移除事件处理程序,请使用 off() 方法。
提示:如需添加只运行一次的事件然后移除,请使用 one() 方法。
相关文章
- jquery.ui.widget.js
- Jquery 选择器 详解 js 判断字符串是否包含另外一个字符串
- jQuery 追加元素、拼接元素的方法总结(append、html、insertBefore、before等) 初识document.onkeydown及其兼容性问题 js学习笔记27----键盘事件 JavaScript onkeydown事件入门实例(键盘某个按键被按下)
- Js和Jquery中小数据点保留2位或几位的函数!(示例)
- Js和Jquery中的取整函数!(两个示例)
- Jquery中把一段html代码动态写入到DIV中(简单实例)
- jQuery技术内幕:深入解析jQuery架构设计与实现原理. 2.6 jQuery.extend()、jQuery.fn.extend()
- jQuery全屏滚动插件fullPage.js
- 原生JS取代一些JQuery方法的简单实现
- 《jQuery Cookbook中文版》——1.5 过滤DOM元素包装器集
- jquery easyui动态校验,easyui动态验证
- jQuery事件
- jquery针对一组checkbox至少要选择一项的方法
- jquery动态删除标签
- jQuery基础 - 改变CSS样式
- 【web前端(三十七)】javascript_jquery核心对象的三种用法、并集选择器
- JS原生Ajax和jQuery的Ajax与代码示例-ok
- JS原生Ajax和jQuery的Ajax与代码示例-ok
- jquery.lazyload.js 的 使用
- jquery是如何架构的.
- JQuery/JS插件 jstree 设置节点的图标样式
- JQuery/JS插件 日期插件