$.proxyで$(this)を使おうとしてハマったこと

タイトルのままなのですが、$.proxyで$(this)を使おうとして単純なところでハマったことをメモとして。

どういったことをしようとしたかと言うと、a要素をクリックして、クリックしたa要素(ここでは.classのついたa要素とする)のhref属性の値を取得して、それをモーダルウィンドウで表示するというようなよくある系のJSをprototypeチェーンを使って書いていたました。

下記のように,クリックの処理。$.proxyを使ってopenを呼び出す。

function func(){
	this._load();
}

func.prototype._load = function() {
	$('.class').on('click', $.proxy(this.open, this));
}

クリックしたa要素のhrefを取得したいので、何も考えずにvar href = $(this).attr('href');と記述。これだとundefinedになります。

funcprototype.open = function(e) {
	e.preventDefault();

	var href = $(this).attr('href');
	$('.iframe').attr('src', href).on('load', function(){
		//略
	});
}

var href = $(this).attr('href');の部分を下記のように変更

funcprototype.open = function(e) {
	//略

	var target = e.target;
	var href = $(target).attr('href');

	//略

}

これで問題なくクリックしたa要素のhrefを取得することができます。使い慣れていないことをすると変なところでハマりました。あまり慣れないことをしてはいけませんね。