JQuery: Как бороться с «это» в AJAX обратных вызовов

Question

Я в настоящее время имеют код, подобный этому для формы:

$('#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, на функцию обратного вызова? Поскольку я знаю идентификатор прямо сейчас, я могу обойти его, выполняя то, что я сделал, но я хотел бы знать, как не быть зависимым от знания идентификатора, поскольку часто у меня нет идентификатора. (Например, если у меня есть ссылка в каждой строке таблицы, и все строки имеют один и тот же обработчик кликов.

Answer 1

Установите переменную со значением «this» перед созданием обратного вызова. Затем используйте это имя переменной в функция обратного вызова.

var form = this; 
$.post("some/url", $(this).serialize(), function(data) { 
     $(form).removeData('busy'); 
} 

Таким образом, переменная с формой будет доступна внутри обратного вызова. при объявлении функции, эта функция будет иметь доступ ко всем переменным в том же объеме, даже если она называется после того, как функция, о которой было заявлено, вернулась.

Вы можете прочитать о закрытии деталей по адресу: http://www.jibbering.com/faq/notes/closures/

Answer 2

Сохраните ссылку на форму.

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

Answer 3

Используйте привязывать

$('#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/ Просто Google это