jQuery预绑定

文章作者:Tyan
博客:noahsnail.com  |  CSDN  |  简书

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/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,863评论 25 709
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,247评论 19 139
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 16,866评论 18 503
  • “一气连江色,寥寥万古清。”悠悠钱塘江水,孕育璀璨文明。壮阔的江畔,坐落着一栋古朴典雅的建筑,它就是浙商藏社,一座...
    浙商收藏阅读 3,012评论 1 1
  • 捣练子.春雪 天静默,雪无声,青麦欢欣树泣零。片片飞花春不解,绿芽和泪盼天晴。
    红袖当空阅读 2,563评论 0 0

友情链接更多精彩内容