jQueryのplugin作成時にajaxメソッドのcallbackで呼び出し元のエレメントを呼び出す方法

皆さんプラグイン作ってますかー。わたしは作ってます、CakePHPの方ですが。 というわけで、こんにちは。今回もタイトルが長いですね。

とある日、jQueryでプラグインを書いていたときのことです。

呼び出し元エレメントを、ajax通信後にごにょごにょしたかったのですが呼び出すことができません。

こんな感じのコードですね。

(function($){

    $.fn.hogeFunc = function(params){
        
        // hogehoge.
        // ここでは、 this で呼び出し元エレメントを取得可能
        
        $.ajax({
            // .. other params ..
            success: function(data, status, xhr){
                // ここで元のエレメントを操作したいの。
                // 例えば、 $(this).text(data);
            }
        });
        
    };
})(jQuery);


$('#div').hogeFunc();

ajaxのcallbackメソッドで $(this).text(data) と書いても何故か呼び出し元エレメントにアクセスできないので困った困った。

で、よくドキュメントを読んでみると、ajaxメソッドのcallbackには、thisとしてajaxのパラメータが渡されるとのこと。

つまり、

$.ajax( { /* こいつが渡されるわけだ */ } );

なら、これにエレメントを渡せばいいじゃない。

ということで、こんな感じ。

(function($){

    $.fn.hogeFunc = function(params){
        
        // hogehoge.
        
        $.ajax({
            // .. other params ..
            element: this,
            success: function(data, status, xhr){
                // アクセスできるぞ。フハハハハハｈ
                $(this.element).text(data);
            }
        });
        
    };
})(jQuery);


$('#div').hogeFunc();

やってみると単純ですね。ハイ。

と、ここまで書いておいてアレですが、これはjQuery 1.3以前での話。 1.4以降は、contextオプションが追加されているので、以下の形式でいけます。

(function($){

    $.fn.hogeFunc = function(params){
        
        // hogehoge.
        
        $.ajax({
            // .. other params ..
            context: this,
            success: function(data, status, xhr){
                // jQuery 1.4以降はさらにスマートに
                $(this).text(data);
            }
        });
        
    };
})(jQuery);


$('#div').hogeFunc();

それでは皆さま、jQueryのある楽しい生活を。