jQuery的事件预绑定

 更新时间:2016年12月05日 11:32:54   投稿:mrr  
这篇文章主要介绍了jQuery的事件预绑定的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

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的事件预绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • jquery 合并内容相同的单元格(示例代码)

    jquery 合并内容相同的单元格(示例代码)

    这篇文章主要是对jquery合并内容相同的单元格示例代码进行了介绍。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • jquery picswitch图片焦点图展示效果

    jquery picswitch图片焦点图展示效果

    jquery pictureswitch制作图片展示效果实现代码,对于想用jquery实现焦点图效果的朋友可以参考下。
    2010-05-05
  • 推荐40个简单的 jQuery 导航插件和教程(下篇)

    推荐40个简单的 jQuery 导航插件和教程(下篇)

    在下面的集合中,你会发现很多便利的 jQuery 导航插件和有用的教程,帮助你实现充满吸引力的网站导航,让你网站更有组织性和交互性
    2012-09-09
  • 使用jquery提交form表单并自定义action的方法

    使用jquery提交form表单并自定义action的方法

    下面小编就为大家带来一篇使用jquery提交form表单并自定义action的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • bootstrap data与jquery .data

    bootstrap data与jquery .data

    最近在做项目的时候用到了bootstrap,在使用中发现其data与jquery的data有些不一样的地方,记录一下,分享给大家
    2014-07-07
  • jQuery创建DOM元素实例解析

    jQuery创建DOM元素实例解析

    这篇文章主要介绍了jQuery创建DOM元素的方法,实例分析了jQuery使用$直接创建DOM元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • 浅谈jQuery中replace()方法

    浅谈jQuery中replace()方法

    这篇文章主要介绍了jQuery中replace()方法用法,实例分析了replace()方法的功能、定义及匹配元素去替换指定内容的方法,需要的朋友可以参考下
    2015-05-05
  • jquery定时滑出可最小化的底部提示层特效代码

    jquery定时滑出可最小化的底部提示层特效代码

    当打开页面或者刷新页面后等待两秒钟,会在底部滑出可最小化的提示层。滑出层半透明,可关闭再现。应用范围很广,比如弹出广告、弹出注册层、弹出最新消息等,实现的jquery代码比较简单
    2013-10-10
  • jquery实现输入框实时输入触发事件代码

    jquery实现输入框实时输入触发事件代码

    本文主要分享了jquery实现输入框实时输入触发事件的代码,代码简单易懂,需要的朋友一起来看下吧
    2016-12-12
  • jQuery DOM插入节点操作指南

    jQuery DOM插入节点操作指南

    本章节主要介绍了jQuery在HTML中动态插入节点的各种方法,制作成表格,方便大家对比学习,需要的朋友可以参考下
    2015-03-03

最新评论