JQuery .click不像我期望的那样工作。为什么?

时间:2012-10-23 16:39:18

标签: javascript jquery jquery-mobile

为什么这个函数不适用于jquery-mobile?

当我点击任何元素时,它会触发警报(“cellNº”+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);
            });
        }
    }
}

4 个答案:

答案 0 :(得分:6)

因为写入的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);
});

答案 1 :(得分:1)

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

答案 2 :(得分:1)

由于您使用的是jQuery,因此没有理由进行任何循环,并且没有理由为每个元素添加click事件。给每个元素一个公共类,使用jQuery 1.7+,使用。

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

答案 3 :(得分:0)

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