jQuery的事件预绑定


Posted in Javascript onDecember 05, 2016

1. 预绑定

首先解释一下什么叫预绑定。预绑定,顾名思义,就是在Web页面上的控件还没出现之前就绑定好事件。预绑定主要是指jQuery中的.on()方法。

2. Demo

HTML代码

<div id="root">
<input type="button" id="test" value="test"/>
</div>

一般的jQuery代码:

$('#root').find('#test').on('click', function() {
...
});

预绑定的jQuery代码:

$('#root').on('click', '#test2', function() {
...
});

jQuery添加控件的代码

$('#root').append('<input type="button" id="test" value="test2"/>')

解释:在页面控件直接显示的情况下,例如'test',上面的两种绑定控件事件的方法都没问题,都可以正常工作,但如果上面的HMTL代码是在模板中,例如jsview中,模板数据不是页面加载时就添加的,或者上面的HTML代码开始不在页面上,是通过jQuery添加的,例如test2是在页面加载之后某个时刻添加的控件,使用一般的绑定控件事件的代码就会有问题,你会发现控件没有绑定事件,而使用预绑定的方法,控件的事件就能绑定上,即使控件是后来添加的。

上面的内容就是jQuery的事件预绑定,jQuery文档地址为:http://api.jquery.com/on/。

以上所述是小编给大家介绍的jQuery的事件预绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个可拖拽列宽表格实例演示
Nov 26 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
编程语言JavaScript简介
Oct 16 Javascript
js面向对象的写法
Feb 19 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
Sep 06 Javascript
angular中的cookie读写方法
Aug 02 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
Aug 17 Javascript
详解JSON Web Token 入门教程
Jul 30 Javascript
JavaScript的console命令使用实例
Dec 03 Javascript
js实现带搜索功能的下拉框
Jan 11 Javascript
微信公众号网页分享功能开发的示例代码
May 27 Javascript
微信小程序实现购物车小功能
Dec 30 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 #Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 #Javascript
微信小程序 底部导航栏目开发资料
Dec 05 #Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 #Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 #Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 #Javascript
解析预加载显示图片艺术
Dec 05 #Javascript
You might like
php记录日志的实现代码
2011/08/08 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
php递归函数怎么用才有效
2018/02/24 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
深入理解Python中装饰器的用法
2016/06/28 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
大学生怎样进行自我评价
2013/12/07 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
代理协议书
2014/04/22 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
费城故事观后感
2015/06/10 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
python析构函数用法及注意事项
2021/06/22 Python