jQueryのコールバックがロード機能で動作しない、ホバーイベントが検出されない

Question

atahualpaテーマでwordpressを使用していて、単純なjavascriptを参照するハイパーリンクがあり、PHPファイルの出力をdivにロードします。この部分はうまく動作します。

<a href="javascript:loadCategory(19,1);">a link</a> 

<script type="text/javascript"> 
jQuery("#categoryposts").load("http://www.mysite.com/myphp.php?cat="+catid+"&paged="+pagedid+"", "", 
     function(responseText, textStatus, XMLHttpRequest) { 
     if(textStatus == 'error') { 
      jQuery('#categoryposts').html('<p>There was an error making the AJAX request</p>'); 
     } 
     } 
); 
    } 
</script> 

は、しかし、私は壁にぶつかるところしかしこれは、DIV「#categoryposts」にロードされている画像（sliding boxgrid）との楽しみを持っていると思います。私のPHPは適切なクラスを持つdivを出力しますが、jQueryからのホバーレスポンスはまったく得られません。私はDOMがロードされる方法に何らかの形で関係があると思われますが、私はそれを理解できません。たとえば、以下のようにコールバック関数として良いものを追加しようとすると、alert1が表示されますが、alert2は決して得られません。また、ホバー機能は動作しません。

  function loadCategory(catid,pagedid) { 

jQuery("#categoryposts").load("http://www.mysite.com/myphp.php?cat="+catid+"&paged="+pagedid+"", function() 
{ 
    alert('alert1'); 
    jQuery('.boxgrid.caption').hover(function(){ 
     alert('alert2'); 
     jQuery(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160}); 
     }, function(){ 
     jQuery(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160}); } 
)}, 
     function(responseText, textStatus, XMLHttpRequest) { 
     if(textStatus == 'error') { 
      jQuery('#categoryposts').html('<p>There was an error making the AJAX request</p>'); 
     } 
     } 
); 

} 

私は物事のすべての種類を試して、これを通じてハックしようとして全体の一日を過ごしたが、壁に当たってきました。 jQueryの達人が手を貸すことができます。

編集：データが取得された後、それをDOMに追加される前に

Answer 1

負荷のコールバックを（書式設定コードをクリーンアップ）が実行されてもよいです。アラート（ 'alert1'）の後に次のようなものを追加してみてください：

alert(jQuery('.boxgrid.caption').length); 

その時点でコレクションが存在するかどうかを教えてください。

コールバックにイベントハンドラを追加しようとする代わりに、 "live（）"関数を使用することもできます。

Answer 2

セレクタが間違っている可能性があります。

alert（$（ '。boxgrid.caption'）。length）と答えると、ゼロ以外の値が返されますか？

Answer 3

jQueryの「ライブ」メソッドを使用してホバー機能をバインドしようとしましたか？むしろ負荷コールバック内ホバーを結合するよりも、あなたはこのようなものを使用して別々にバインドできます。これは、要素が事実の後にロードされている場合でも、動的結合を可能

$(".boxgrid.caption").live('hover', function(){ 
    //your hover function 
}); 

。