jQuery预绑定

作者: SnailTyan | 来源:发表于2016-11-25 18:37 被阅读130次

文章作者: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/

相关文章

  • jQuery预绑定

    文章作者:Tyan博客:noahsnail.com | CSDN | 简书 1. 预绑定 首先解释一下什么叫预绑定...

  • 通过jquery动态添加的元素绑定事件

    1.一般通过jquery绑定事件# 2.通过jquery添加的元素绑定事件#

  • Jquery day_3

    1.1 Jquery 事件注册 1.2 jquery 事件处理 on(): 用于事件绑定,目前最好用的事件绑定方...

  • jquery对节点的操作

    Jquery对事件的绑定 $().bind(“事件类型”, 事件处理); 给jquery绑定一个事件$().bi...

  • jQuery知识整理

    jQuery jQuery和DOM关系 jquery框架对象分析 加载事件 事件绑定 动画效果 jquery封装的...

  • jQuery事件

    1、jquery 如何绑定事件?直接绑定和使用事件代理分别如何使用 jquery在1.7版本之前绑定事件可通过bi...

  • jQuery中绑定事件时bind和on的区别

    jquery的bind跟on绑定事件的区别:主要是事件冒泡;jquery文档中bind和on函数绑定事件的用法: ...

  • 6. Angular

    Angular使用的是MVC模式 jQuery绑定数据与 Angular绑定数据的区别?jQuery先拿DOM节点...

  • jquery的bind跟on绑定事件的区别

    jquery的bind跟on绑定事件的区别:主要是事件冒泡; jquery文档中bind和on函数绑定事件的用法:...

  • 03-jQuery事件相关

    事件绑定与解绑 jQuery中有两种绑定事件方式eventName(fn);编码效率略高/部分事件jQuery没有...

网友评论

本文标题:jQuery预绑定

本文链接:https://www.haomeiwen.com/subject/onrwpttx.html