jquery循環中動態綁定事件

$(function(){
    var ids = ['startCard','endCard'];
    var message = ['必填（如：00000）', '必填（如：11111）'];
    for(var i=0 ;i<ids.length;i++){
        var v = $("#"+ids[i]).val();
        if(v==''){
            $("#"+ids[i]).val(message[i]);
            $("#"+ids[i]).css('color','red');
        }
        $("#"+ids[i]).bind("focus",{index:i},focusHandler).bind("blur",{index:i},blurHandler);
    }
    function focusHandler(event) {
        if($("#"+ids[event.data.index]).val()==message[event.data.index]) {
            $("#"+ids[event.data.index]).val("");
            $("#"+ids[event.data.index]).css('color','black');
        }
    }
    function blurHandler(event) {
        if($("#"+ids[event.data.index]).val()=='') {
            $("#"+ids[event.data.index]).val(message[event.data.index]);
            $("#"+ids[event.data.index]).css('color','red');
        }
    }
});

<input type="text" name="startCard" id="startCard"/>
<input type="text"  name="endCard" id="endCard"/>

<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>

    <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" />