Как я могу передать параметр переменной анонимной функции, используя jquery?

Question

Может кто-нибудь сказать мне, что я здесь делаю не так? Я упростил это ниже, но я в основном пытаюсь создать список и получить событие click, которое ссылается на переменную, доступную только в цикле.

for (var i = 0; i < data.length; i++) {                                                                           
  $newRow = $(rowFormat);                    
  $('a:first', $newRow).click(function(i){
    return function() { alert(i); } 
  });
  $list.append($newRow);      
}

Answer 1

Вы не вызываете внешнюю функцию.

$('a:first', $newRow).click(function(j){
  return function() { alert(j); } 
}(i)); /* Pay special attention to this line, it is where the major change is */

Как упоминал TJ Crowder, вы можете вывести фабрику из цикла.

function my_factory(j) {
    return function() { 
        alert(j); 
    }; 
}

$('a:first', $newRow).click(my_factory(i));

Answer 2

Вы почти получили это, только одно небольшое изменение.На самом деле это мой любимый пример практического использования замыкания в Javascript.

По сути, вам нужно создать функцию, которая принимает значение и возвращает функцию, которая использует это значение.Посмотрите закомментированную строку ниже о том, чего не хватает в вашем примере.Ваш код создал анонимную функцию, но не вызвал ее.

for (var i = 0; i < data.length; i++) {                                                                           
  $newRow = $(rowFormat);
  var fn = (function (value) {
    return function() {
      alert(value);
    };
  }) (i); //this is what you were missing, you need to invoke the anonymous function
  $('a:first', $newRow).click(fn);
  $list.append($newRow);      
}

Answer 3

Используйте «bind», чтобы прикрепить событие «click» и передать параметр.Используя 'event.data', вы сможете получить правильное значение вашего параметра:

Пример 1:

 $(document).ready(function()
 {
    for (var i = 0; i < data.length; i++) 
    {                                                                           
        $newRow = $(rowFormat);                    
        $('a:first', $newRow).bind('click', {i: i},
            function (event)
            {
                alert(event.data.i);
            }
        );
        $list.append($newRow);      
    }
});

Пример 2:

$(document).ready(function()
{
    $(".selectorA").each(function()
    {
        var elementId = $(this).attr("id");

        for(var i = 0; i < 20; i++) 
        {
            $('#question' + i).bind('click', {currentIndex: i, elementId: elementId}, 
                function (event)
                {
                   alert(event.data.currentIndex + " | " + event.data.elementId);
                }
            );
        }
    }
});