Проблема с динамическим вызовом функций jQuery

Question

for(n=0;n < 20;n++){
     $('#button' + n).click(function () { newAction(n); });
}

function newAction(x){
     alert(x);
}

Проблема с этим кодом заключается в том, что когда я нажимаю кнопки, их действия по щелчку почему-то не связаны с их номером, поэтому при нажатии кнопки 5 я могу получить предупреждение 6 или что-то в этом роде.

Answer 1

Мистер Лаки находится на правильном пути, но его пример мне показался немного сложным для чтения.

function button_bind( num ){ 
     $("#button" + num ).click(function(){
         newAction(num);
     });
}

for(var n = 0; n < 20; n++) {
     button_bind(n);
}

function newAction(x){
     alert(x);
}

Это должно прояснить вашу проблему с областью видимости.

Вышеприведенное может быть преобразовано во встроенное:

for(var n = 0; n < 20; n++) {

     (function(num){ 

        $("#button" + num ).click(function(){
         newAction(num);
        });

     })(n);

}

function newAction(x){
     alert(x);
}

Answer 2

Это выглядит странно, но это было бы более подходящим способом создания замыкания, чтобы вы могли получить доступ к переменной loop-scope за одну итерацию ...

  for(var n = 0; n < 20; n++) {
    $('#button' + n).click((function(i) {
      return function(e) { newAction(i) }
    })(n));
  }

  function newAction(x){
    alert(x);
  }

Answer 3

Я могу придумать более простые способы сделать то, что вы пытаетесь, но это сработает для вас:

РЕДАКТИРОВАТЬ: Извините, я думал, что было ясно, что я поставляю замену линии внутри вашей петли. Здесь вся действующая программа

РЕДАКТИРОВАТЬ 2: Хорошо, вот внешняя оболочка $ (document) .ready (), которой нет даже в исходном вопросе. Это было проверено. это работает. Даже на 1.3+. Это лучший ответ.

Я выставил работающую версию этой программы, которую вы можете попробовать, посетив здесь

$(function() {
  for (n = 0; n < 20; n++){
    $('#button' + n).bind('click', n, function (e) { newAction(e.data); });
  }

});

function newAction(x){
  alert(x);
}

Answer 4

Попробуйте следующее:

for(n=0;n < 20;n++){
     $('#button' + n).click(function (n) { newAction(n); });
}

function newAction(x){
     alert(x);
}

Причина в замыканиях. Когда вы не передаете n вместе с анонимной функцией, javascript ищет переменную в своей области видимости и родительской области видимости. Родительская область имеет значение 'n', но это n является значением n после цикла for. Передавая n, вы создаете новый n внутри области действия функции, и этот не изменяется при выполнении цикла for.