たくさんあるボタンやリンクにClassを指定して、jQueryでイベントを処理するといった処理はよくあると思います。
IDでイベントを取得したのであれば、同様にコールバック関数からIDを指定して更なる処理を行うことは簡単です。
しかしClassでイベントを取得した場合は、$(this)などを利用して、イベントの起こった要素を探すことが多いのではないでしょうか？
残念なことにコールバック関数内で$(this)を呼び出しても直前の処理が呼び出された要素に入れ替わってしまいます。
例えばこんなコードです。
[javascript]$(function(){
$(“.button”).click(function(){
var age = $(this).data(‘age’);
$.get( “sample.php”, {“age”:age}, function(data){
$(this).removeClass(“button”);
});
});
});
[/javascript]
class=”button”が指定された要素からデータ(age)を取得してajax処理をし、
コールバック関数でクリックされた要素からclass=”button”を取り除き、二重処理されないようにしています。
ところがコールバック関数内の$(this)はすでにクリックされた要素とは異なる要素が入っており、
希望するような動作はしません。
なのでこの場合は事前に$(this)の内容を変数に移動しておくことで、$(this)の変化に対応することができます。
[javascript]$(function(){
$(“.button”).click(function(){
var objThis = $(this); //$(this)を変数に格納
var age = $(this).data(‘age’);
$.get( “sample.php”, {“age”:age}, function(data){
$(objThis).removeClass(“button”); //変数に保存したオブジェクトに対しremoveClassを実行する
});
});
});[/javascript]