jQuery: щелкнуть ajax, получить щелкнутый объект в done/fail?

Question

Простой запрос ajax, но запускается для каждого элемента класса с использованием события .click(). Когда он добирается до .done(), я не могу понять, как искать элемент, который был нажат, чтобы я мог правильно удалить класс m_action.

Ниже приведен код. Я уверен, что я пропустил что-то простое, но я без проблем нашел с помощью веб-инструментов Chrome и Firefox и не могу найти дублирующий вопрос здесь на Stack.

Вкратце: , используя код ниже, как правильно удалить классэлемента с щелчком на успешном возврате ajax jQuery?

<script type="text/javascript"> 
    jQuery("div#normal .m_action").click(function() { 
     jQuery.ajax({ 
      url: "./action.php", 
      type: "POST", 
      data: { action: this.id } 
     }).done(function(result) { 
      jQuery(this).removeClass("m_action"); 
      jQuery(this).html(result); 
     }).fail(function(result) { 
      alert("There was an error.") 
     }); 
    }) 
</script> 

Answer 1

Вы можете просто сохранить ссылку на него так, что она доступна в любом месте в этой области видимости:

jQuery("div#normal .m_action").click(function() { 

    var elem = this; // <-- right here 

    jQuery.ajax({ 
     url: "./action.php", 
     type: "POST", 
     data: { action: this.id } 
    }).done(function(result) { 
     jQuery(elem).removeClass("m_action"); // <-- elem is still available 
     jQuery(elem).html(result); // <-- 
    }).fail(function(result) { 
     alert("There was an error.") 
    }); 
}); 

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

Answer 2

Этот код должен работать:

$(document).ready(function() 
{ 
    jQuery(".m_action").click(function() { 
     var self = $(this); 
     jQuery.ajax({ 
      url: "./action.php", 
      type: "POST", 
      data: { action: this.id } 
     }).done(function(result) { 
      self.removeClass("m_action"); 
      self.html(result); 
     }).fail(function(result) { 
      alert("There was an error.") 
     }); 
    }) 

}); 
</script>