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 相关文章推荐
在jQuery中 常用的选择器介绍
Apr 16 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 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
一个简洁的多级别论坛
2006/10/09 PHP
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
smarty内置函数foreach用法实例
2015/01/22 PHP
学习PHP session的传递方式
2016/06/15 PHP
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
用Python生成器实现微线程编程的教程
2015/04/13 Python
python 调用win32pai 操作cmd的方法
2017/05/28 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
理论讲解python多进程并发编程
2018/02/09 Python
Python 判断奇数偶数的方法
2018/12/20 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
Python字符串的一些操作方法总结
2019/06/10 Python
django 中QuerySet特性功能详解
2019/07/25 Python
python中的itertools的使用详解
2020/01/13 Python
Python通过VGG16模型实现图像风格转换操作详解
2020/01/16 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
python实现取余操作的简单实例
2020/08/16 Python
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
戴尔美国官网:Dell
2016/08/31 全球购物
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
优秀员工自荐书
2013/12/19 职场文书
周年庆典邀请函范文
2014/01/24 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
javaScript Array api梳理
2021/03/31 Javascript
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS