<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， 因?yàn)閒unction() {} 并沒有被立即解析，直到調(diào)用的時候才被解析，這時index已經(jīng)是3了。


        // 2.
        
        // 立即彈出0, 1, 2, 3，因?yàn)槭褂昧薴unction() {}(index)立即被解析，遇到alert，就立即彈出來了。


        // 3.
        
        // 正確執(zhí)行，點(diǎn)擊btn0，彈出0，點(diǎn)擊btn1，彈出1...
        // 1.因?yàn)閒unction(i) {}(index)是被立即解析的，所以i依次送入的是0, 1, 2, 3
        // 2.內(nèi)部沒有直接alert，是因?yàn)椴幌肓⒓磮?zhí)行，想點(diǎn)擊時再執(zhí)行，所以返回了一個函數(shù)出去。


        // 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);
        }
        // 正確執(zhí)行，點(diǎn)擊btn0，彈出0，點(diǎn)擊btn1，彈出1...
        // 利用了event.data，因?yàn)閕ndex在綁定的時候已經(jīng)被持久化到event.data中了，所以響應(yīng)的時候我們可以取到。
      });
    
    </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循環(huán)綁定事件就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: