对未来的元素绑定事件不能用bind,

1、可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了。

2、推荐用on代替(注:1.7及以上的版本才支持)。用法:on(events,[selector],[data],fn)

代码如下:

  1. //放在$(function(){})里才有效
  2. $(document).on("click", "#testDiv", function(){
  3. //此处的$(this)指$( "#testDiv"),而非$(document)
  4. });

3、 当只想为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数时,用.one()代替on就可以了,注意不是在所有的[selector]上都可以执行一次,而是在这些[select]上总共也就执行一次,对未来的元素也有效。

4、如果某个div里有增删改三个按钮需要绑定事件,像下面这些写:

代码如下:

  1. $('#btn-add').click(function(){});
  2. $('#btn-del').click(function(){});
  3. $('#btn-edit').click(function(){});

这样写的坏处:看不出三者的结构联系,没有理由事件冒泡。

看看CoffeeDeveloper的对jQuery的事件绑定的一些思考 推荐的方法吧,可以写成这样:

代码如下:

  1. $("#btnContainer").coffee({
  2. click: {
  3. "#btn-add": function(){ //do something },
  4. "#btn-del": function(){ //do something },
  5. "#btn-edit": function(){ //do something }
  6. } ,
  7. mouseenter:{
  8. "#btn-abc": function(){ //do something },
  9. }
  10. });

这样写是不是好看多了,(.coffee()是自定义的函数,你能自己写出这个函数吗?),只是如果绑定的function比较长的话,感觉代码看起来还是有点乱,评论中的代码如下:

  1. $('#btnContainer')
  2. .on('click','#btn-add', function(){})
  3. .on('click','#btn-del', function(){})
  4. .on('click','#btn-edit',function(){});

jQuery中对未来的元素绑定事件用bind、live or on的更多相关文章

  1. jQuery中对未来的元素绑定事件

    对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代 ...

  2. jQuery中对未来的元素绑定事件用 on

    最近项目需要点击弹窗里面的a标签出现外连接跳转提示 <a href="javascript:void(0);" target="_blank" id=&q ...

  3. WEB前端技巧之JQuery为动态添加的元素绑定事件.md

      jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( select ...

  4. jQuery 为动态添加的元素绑定事件

    在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...

  5. 关于 jquery html 动态添加的元素绑定事件——On()

    Ajax动态生成的数据,动作绑定需要重新执行 $(document).on('click','.btn1',function(){}); 替换: $('btn1').on('click') = fun ...

  6. jquery给动态生成的元素绑定事件,on函数

    首先先解释一下什么是动态生成的元素:动态生成的元素即我们用jquery的内部插入函数append()所生成的html代码.相对的也有静态生成的元素:即直接编写在页面的html代码. 下面通过例子来讲解 ...

  7. jquery html动态添加的元素绑定事件详解

    在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况: <div id="testdiv"> <ul></ul> </div&g ...

  8. jQuery给动态添加的元素绑定事件的方法

    我们在开发过程会遇到无法给动态元素添加绑定事件,解决方案如下: 例如 <div id="testdiv">   <ul></ul> </d ...

  9. jQuery对 动态添加 的元素 绑定事件(on()的用法)

    从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...

随机推荐

  1. ACM-ICPC国际大学生程序设计竞赛北京赛区(2017)网络赛 i题 Minimum(线段树)

    描述 You are given a list of integers a0, a1, …, a2^k-1. You need to support two types of queries: 1. ...

  2. (转)poj算法做题顺序

    初期: 一.基本算法: (1)枚举. (poj1753,poj2965) (2)贪心(poj1328,poj2109,poj2586) (3)递归和分治法. (4)递推. (5)构造法.(poj329 ...

  3. [luogu1912][bzoj4196][NOI2015]软件管理器

    题解 树剖模板题,每次改变是\(1\)或者是\(0\),区间求和和区间修改就可了. ac代码 # include <cstdio> # include <cstring> # ...

  4. 【转】ls 命令的 20 个实用范例

    Linux中一个基本命令是ls.没有这个命令,我们会在浏览目录条目时会遇到困难.这个命令必须被每个学习Linux的人知道. ls是什么 ls命令用于列出文件和目录.默认上,他会列出当前目录的内容.带上 ...

  5. [IOI2018] seats 排座位

    [IOI2018] seats 排座位 IOI2018题解 压缩状态思想很不错的 每次把原来的贡献减掉,新来的再加上 最多涉及10个点 注意: 1.去重 2.下标从0开始 3.线段树初始的最小值个数都 ...

  6. 使用html5获取当前手机的经纬度,并接入百度地图API,查询出当前位置

    最近项目需要,稍微研究一下html5获取当前地理位置的问题. 获取当前位置的经纬度很简单,一句代码就搞定 navigator.geolocation.getCurrentPosition(functi ...

  7. VUE在BODY上绑定enter事件

    mounted () { this.bodyListener = (e) => { if (e.keyCode === 13 && e.target === document.b ...

  8. 【maven】依赖、继承、聚合

    依赖: <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId&g ...

  9. JavaScript模板代码总结

    //中文input框对非中文的校验 var reg=/[^\u4E00-\u9FA5]/g; if (reg.test($("#jgqc").val())){ alert(&quo ...

  10. Spring_bean的实例化时机

    前言:创建Java对象 public class User { private String name; private Integer age; public User() { System.out ...