jQuery: Как иметь дело с 'этим' в обратных вызовах Ajax
У меня в настоящее время есть код, подобный этому для формы:
$('#some-form')
.submit(function()
{
// Make sure we are not already busy
if($(this).data('busy'))
return false;
$(this).data('busy', true);
// Do post
$.post("some/url", $(this).serialize(), function(data)
{
if(data.success) // Success is a boolean I set in the result on the server
{
// Deal with data
}
else
{
// Display error
}
$('#some-form')
.removeData('busy');
});
return false;
});
Моя проблема - то, что я хотел бы так или иначе устранить необходимость знания идентификатора формы в обратном вызове сообщения. В конце, куда я удаляю busy данные из формы, я хотел бы так или иначе не, имеют это трудно кодированное. Есть ли какой-либо способ, которым я могу сделать это? Есть ли способ, которым я могу вручить то, что находится в this к функции обратного вызова сообщения? Так как я знаю идентификатор прямо сейчас, я могу обойти его путем выполнения того, что я сделал, но я хотел бы знать, как не зависеть от знания идентификатора, так как часто у меня нет идентификатора. (Например, если у меня есть ссылка в каждой строке в таблице, и все строки имеют тот же обработчик щелчков.
3 ответа
Задайте переменной значение "this" перед созданием обратного вызова. Затем используйте это имя переменной в функции обратного вызова.
var form = this;
$.post("some/url", $(this).serialize(), function(data) {
$(form).removeData('busy');
}
Таким образом, переменная с формой будет доступна внутри обратного вызова. Когда вы объявляете функцию, эта функция будет иметь доступ ко всем переменным в той же области, даже если она вызывается после того, как функция, в которой она была объявлена, вернулась.
Подробнее о закрытии можно прочитать по адресу: http://www.jibbering.com/faq/notes/closures/
Сохраните ссылку на форму.
var form = $("form").submit(function ()
{
// do ajax call here, referencencing the "form" variable
return false; // return false to prevent default behavior
});
Как правило, вам придется иметь дело только с одним элементом формы. Таким образом, нет необходимости создавать ссылку внутри функции отправки, обертывая this в объекте jQuery.
Вот ваш измененный код:
var form = $("#some-form").submit(function ()
{
if(form.data("busy")) return false;
form.data("busy", true);
$.post("some/url", form.serialize(), function (data)
{
if (data.success)
{
}
else
{
}
form.removeData("busy");
});
return false;
});
Используйте привязку
$('#some-form')
.submit(function()
{
// Make sure we are not already busy
if($(this).data('busy'))
return false;
$(this).data('busy', true);
// Do post
$.post("some/url", $(this).serialize(), function(data)
{
if(data.success) // Success is a boolean I set in the result on the server
{
// Deal with data
}
else
{
// Display error
}
$(this).removeData('busy');
}.bind(this)); //Here
return false;
});
Вы можете найти интересную статью о области действия javascript: http://www.digital-web.com/articles/scope_in_javascript/ Просто погуглите