jquery迴圈綁定事件

最後更新：2013-10-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<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.
                /*
                for(var index in array) {
                    $("#btn" + index).click(function() {
                        var item = array[index];
                        alert(item);
                    });
                }*/
                // 始終彈出3，因為function() {} 並沒有被立即解析，直到調用的時候才被解析，這時index已經是3了。

                // 2.
                /*
                for(var index in array) {
                    $("#btn" + index).click(function(i) {
                        var item = array[i];
                        alert(item);
                    }(index));
                }*/
                // 立即彈出0, 1, 2, 3，因為使用了function() {}(index)立即被解析，遇到alert，就立即彈出來了。

                // 3.
                /*for (var index in array) {
                    $("#btn" + index).click(function (i) {
                        return function () {
                            var item = array[i];
                            alert(item);
                        };
                    } (index));
                }*/
                // 正確執行，點擊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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More