Как передать параметр переменной анонимной функции с помощью jquery?
Может кто-нибудь сказать мне, что я делаю неправильно здесь? Я упростил его ниже, но я в основном пытаюсь создать список и иметь событие click, которое ссылается на переменную, доступную только в цикле.
for (var i = 0; i < data.length; i++) {
$newRow = $(rowFormat);
$('a:first', $newRow).click(function(i){
return function() { alert(i); }
});
$list.append($newRow);
}
Ответы
Ответ 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 */
Как T.J. Crowder, вы можете переместить factory из цикла.
function my_factory(j) {
return function() {
alert(j);
};
}
$('a:first', $newRow).click(my_factory(i));
Ответ 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);
}
Ответ 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);
}
);
}
}
});