JQuery .click不像我期望的那樣工作。 為什么？

Question

為什么這個函數不適用於jquery-mobile？

當我點擊任何元素時，它會觸發警報（“單元格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

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

Answer 3

由於您使用的是jQuery，因此沒有理由進行任何循環，並且沒有理由將click事件添加到每個元素。 給每個元素一個公共類，並使用jQuery 1.7+，使用。

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

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);
                }
            }());
        }
    }
}