1. <html>
  2. <head>
  3. <title></title>
  4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  5. </head>
  6. <body>
  7. <script type="text/javascript">
  8. $(document).ready(function () {
  9. var array = [0, 1, 2, 3];
  10.  
  11. // 1.
  12. /*
  13. for(var index in array) {
  14. $("#btn" + index).click(function() {
  15. var item = array[index];
  16. alert(item);
  17. });
  18. }*/
  19. // 始终弹出3, 因为function() {} 并没有被立即解析,直到调用的时候才被解析,这时index已经是3了。
  20.  
  21. // 2.
  22. /*
  23. for(var index in array) {
  24. $("#btn" + index).click(function(i) {
  25. var item = array[i];
  26. alert(item);
  27. }(index));
  28. }*/
  29. // 立即弹出0, 1, 2, 3,因为使用了function() {}(index)立即被解析,遇到alert,就立即弹出来了。
  30.  
  31. // 3.
  32. /*for (var index in array) {
  33. $("#btn" + index).click(function (i) {
  34. return function () {
  35. var item = array[i];
  36. alert(item);
  37. };
  38. } (index));
  39. }*/
  40. // 正确执行,点击btn0,弹出0,点击btn1,弹出1...
  41. // 1.因为function(i) {}(index)是被立即解析的,所以i依次送入的是0, 1, 2, 3
  42. // 2.内部没有直接alert,是因为不想立即执行,想点击时再执行,所以返回了一个函数出去。
  43.  
  44. // 4.
  45. for (var index in array) {
  46. $("#btn" + index).bind("click", {index: index}, clickHandler);
  47. }
  48.  
  49. function clickHandler(event) {
  50. var index = event.data.index;
  51. var item = array[index];
  52. alert(item);
  53. }
  54. // 正确执行,点击btn0,弹出0,点击btn1,弹出1...
  55. // 利用了event.data,因为index在绑定的时候已经被持久化到event.data中了,所以响应的时候我们可以取到。
  56. });
  57.  
  58. </script>
  59.  
  60. <input type="button" id="btn0" value="btn0" />
  61. <input type="button" id="btn1" value="btn1" />
  62. <input type="button" id="btn2" value="btn2" />
  63. <input type="button" id="btn3" value="btn3" />
  64. </body>
  65. </html>

jquery循环绑定事件的更多相关文章

  1. JavaScript利用闭包循环绑定事件

    我们经常在做前端面试题的时候,会遇到循环绑定事件后,输出打印结果,很多人总是搞不清楚,今天借此机会跟大家梳理一下闭包相关作用. 1.首先我们举一个简单的例子. html部分: <a href=& ...

  2. jquery on 绑定事件

    jquery on 绑定事件 1. 多个选择器绑定一个事件 2. 多个事件绑定一个函数 3. 一个选择器绑定多个事件,有两种写法: 或者 on只绑定一次事件,绑定父元素,防止初始化时数据未加载,绑定出 ...

  3. jQuery中绑定事件bind() on() live() one()的异同

    jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件 bind()-------------------------版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也 ...

  4. jQuery中绑定事件的几种方法

    以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){});  (2)target.bind("click",functi ...

  5. JQuery中绑定事件(bind())和移除事件(unbind())

    有时候事件执行完了,想取消事件的效果可以通过一定的办法来处理.比如bind()(绑定事件)和unbind()(移除通过bind()方法添加的事件)方法来移除事件的效果. 比如下面的一个案例: 复制代码 ...

  6. jquery on绑定事件叠加解决方法

    jquery on绑定事件叠加解决方法 代码如下 <pre> $('.maoqiu').each(function () { var is_bind = $(this).attr('is_ ...

  7. dom元素循环绑定事件的技巧

    以前总觉得自己写的代码不太规范,尤其是写原生的时候.举个例子: 要为页面上所有".a"的元素绑定事件,当然了用jquery很方便:$('.a').bind("click& ...

  8. jQuery .on() 绑定事件无效

    前几天,要在移动端实现一系列的功能,用 HTML + JS. 按照以往的思路,事件绑定就直接 $(document).on "click", "selector" ...

  9. jquery 获取绑定事件

    在1.8.0版本之前,我们要想获取某个DOM绑定的事件处理程序可以这样: 1 $.data(domObj,'events');//或者$('selector').data('events') 而从1. ...

随机推荐

  1. PHP 图片水印类

    <?php /** * 加水印类,支持文字图片水印的透明度设置.水印图片背景透明. * $obj = new WaterMask($imgFileName); //实例化对象 * $obj-&g ...

  2. WebLogic Exception

    访问Weblogic发生以下异常: 2013-08-20 10:15:11 ERROR [ExceptionConvertOnlyFilter] doFilter (line:70) Could no ...

  3. 《大话》之第三者家族 代理 Vs 中介者

    前两天,有个同学突然问我说:"我感觉代理模式和中介者模式不好区分,你能给我讲讲吗?" 刚开始还没敢张嘴,因为他突然一问,我貌似也不知道,经过整理,现在将结果贴出来,请大家共享 代理 ...

  4. chche缓存

    打开一张图片,先从缓存中找,如果没有,再去sccard中找,如果还没有,就去网络下载.下载好了以后,先保存到sdcard中,再保存到缓存中 public class ImageAsyncTask ex ...

  5. &&、||、?:、,四个运算符的求值顺序

    C语言中只有四个运算符(&&.||.?:.,)存在规定的求值顺序. 运算符&&和运算符||首先对左侧操作数求值,只在需要时才对右侧操作数求值. 运算符?:有三个操作数: ...

  6. ural 1157. Young Tiler

    1157. Young Tiler Time limit: 1.0 secondMemory limit: 64 MB One young boy had many-many identical sq ...

  7. 使用CSS 3创建不规则图形 文字围绕

    前言 CSS 创建复杂图形的技术即将会被广泛支持,并且应用到实际项目中.本篇文章的目的是为大家开启它的冰山一角.我希望这篇文章能让你对不规则图形有一个初步的了解. 现在,我们已经可以使用CSS 3 常 ...

  8. JAVA获取两个List<String>中不同的数据

    效率非常不错 测试结果: 1.list1中有97277条数据,list2中有37894条数据,两个list进行对比找出不同的数据共60000条左右,用时:0.051秒 2.list1中有97277条数 ...

  9. JQuery获取和设置Select选项常用方法总结 (转)

    1.获取select 选中的 text: $("#cusChildTypeId").find("option:selected").text(); $(&quo ...

  10. CentOS6.5的openssl升级

    CentOS6.5的openssl升级:(修复心脏漏血漏洞) [root@linux1 ~]# rpm -qi openssl|grep VersionVersion : 1.0.1e Vendor: ...