javascript - JQuery .click が期待どおりに機能しません。なんで？

Question

この関数が jquery-mobile で機能しないのはなぜですか?

任意の要素をクリックすると、アラートがトリガーされます("cell Nº"​​+60)

function insertOnClick(){
    for (j = 0; j < 6; j++) {
        for (i = 1; i < 11; i++) {
            n = 10 * j + i;
            el = "#num" + n;
            $(el).click(function() {
                alert("cell nº"+n);
            });
        }
    }
}

Answer 1

書かれているように、 n は常にその変数に割り当てる最後の数値になります。これは、関数を定義した値ではなく、クリックハンドラーが実行されたときの値になります。

クロージャーを使用する

目的を達成するには、クロージャーを使用する必要があります。

function insertOnClick(){
    for (j = 0; j < 6; j++) {
        for (i = 1; i < 11; i++) {
            n = 10 * j + i;

            (function(number) {

                el = "#num" + number;
                $(el).click(function() {
                    alert("cell nº"+number);
                });

            }(n));
        }
    }
}

より良いアイデア

ただし、単一のハンドラーを使用する方がはるかに優れています。

$('someselector').click(function(e) {
    var number = $(this)[0].id.replace('num', '');
    alert("cell nº" + number);
});

Answer 2

jQuery を使用しているため、ループを実行する理由はなく、すべての要素にクリック イベントを追加する理由もありません。すべての要素に共通のクラスを与え、jQuery 1.7 以降では on を使用します。

$(document).on("click", ".commonClass", function() {
    var elem = $(this);
    alert(elem.prop("id"));
});

Answer 3

$('[id^="num"]').click(function() {
    alert($(this).attr('id').slice(3))
})

Answer 4

function insertOnClick(){
    for (j = 0; j < 6; j++) {
        for (i = 1; i < 11; i++) {
            n = 10 * j + i;
            el = "#num" + n;
            $(el).click(function(n) {
                return function(){
                alert("cell nº"+n);
                }
            }());
        }
    }
}