AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

深入理解JQuery循环绑定事件

51自学网 http://www.wanshiok.com
JQuery循环绑定事件

深入理解JQuery循环绑定事件

<html>  <head>    <title></title>    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  </head>  <body>    <script type="text/javascript">      $(document).ready(function () {        var array = [0, 1, 2, 3];        // 1.                // 始终弹出3, 因为function() {} 并没有被立即解析,直到调用的时候才被解析,这时index已经是3了。        // 2.                // 立即弹出0, 1, 2, 3,因为使用了function() {}(index)立即被解析,遇到alert,就立即弹出来了。        // 3.                // 正确执行,点击btn0,弹出0,点击btn1,弹出1...        // 1.因为function(i) {}(index)是被立即解析的,所以i依次送入的是0, 1, 2, 3        // 2.内部没有直接alert,是因为不想立即执行,想点击时再执行,所以返回了一个函数出去。        // 4.        for (var index in array) {          $("#btn" + index).bind("click", {index: index}, clickHandler);        }        function clickHandler(event) {          var index = event.data.index;          var item = array[index];          alert(item);        }        // 正确执行,点击btn0,弹出0,点击btn1,弹出1...        // 利用了event.data,因为index在绑定的时候已经被持久化到event.data中了,所以响应的时候我们可以取到。      });        </script>    <input type="button" id="btn0" value="btn0" />    <input type="button" id="btn1" value="btn1" />    <input type="button" id="btn2" value="btn2" />    <input type="button" id="btn3" value="btn3" />      </body></html>

以上这篇深入理解JQuery循环绑定事件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持wanshiok.com。


JQuery循环绑定事件  
上一篇:深入理解jQuery之事件移除  下一篇:JQuery在循环中绑定事件的问题详解