javascript - AJAX 応答での jQuery ロケーターの問題

Question

なぜこれが機能しないのかを理解しようと頭を悩ませているので、最終的にjsFiddleで行っていることの単純化されたバージョンを作成しました。もちろん、そこで動作します。

私がやっていること - 要素の上にカーソルを置いて単純な AJAX 呼び出しを行い、その応答を DIV に入れます。これが私のサイトのコードで、機能していません...

HTML

<div class="profileimage">
   <a href="#">
      <img src="/profilepics/img.jpg" />
      <p>Test Here</p>
   </a>
   <div class="profileInfo"></div>
</div>

jQuery

$(document).ready(function() {
    $('.profileimage').hover(function() {
        $.ajax({
            url:"getProfile.php",
            success:function(HTML){
                $(this).find('.profileInfo').html(HTML);
            }
        });
    });
});

また、参考までに、現在getProfile.phpにあるのは次のとおりです。

<p>RESULTS FROM AJAX</p>

機能するのは、AJAX 要求が発生し、結果が正常に返されることです。success 関数の行を に置き換えるとalert(HTML)、応答が表示されます。うまくいかないのは、応答がprofileInfo子要素に到達しないことです。

ロケーターが間違っていると思ったので、テスト用に jsFiddle ( HERE ) を作成しました。結局のところ、ロケーターは問題なく動作します。

ここでの私の質問は、ロケーターが jsFiddle では正常に機能するが、AJAX リクエストでは機能しない場合です... AJAX 呼び出しでのロケーターの使用方法について、変更する必要があるものはありますか? $(this).find('.profileInfo').html(HTML);AJAX 応答で使用しているかどうかに関係なく、うまく機能しない理由がわかりません。

ご意見/ご提案をお待ちしております...