2012-05-12 28 views
4

これは複雑になる可能性があるので、できる限り私の状況を説明しようとします。jQuery関数が無限スクロール(AJAX)の後で作業していない場合

私は石工と一緒に、このjQueryプラグインhttp://www.infinite-scroll.com/を使用しています:http://masonry.desandro.com/

すべてが正常に動作しています。

ただし、投稿にカーソルを合わせると表示される各投稿に関する情報を作成しようとしています。ここに私のコードは次のとおりです。

$(".main").hover(function(){ 
    $(this).next(".info").slideToggle("fast"); 
}); 

これだけ最初のページの内容の作品ではなく、無限スクロールによってロードされ、余分なコンテンツ。

だから私は私の石工コードのコールバックに機能を追加しようとした:

// trigger Masonry as a callback 
function(newElements) { 
    // hide new items while they are loading 
    var $newElems = $(newElements).css({opacity: 0}); 
    // ensure that images load before adding to masonry layout 
    $newElems.imagesLoaded(function(){ 
     // show elems now they're ready 
     $newElems.animate({opacity: 1}); 
     $container.masonry('appended', $newElems, true); 
    }); 
    $(".main").hover(function(){ 
     $(this).next(".info").slideToggle("fast"); 
    });  
}); 

(私は完全に間違ってこれをやっている場合は、私が前にアヤックスで働いたことはないし、単に試していすみません)

これにより、無限スクロールによって読み込まれた新しい余分なコンテンツに対してホバー機能が働きましたが、元のコンテンツと衝突しました。

私のホバー機能を実装する最良の方法は、Ajaxコールの前後にロードされたすべてのポストで適切に機能するようにすることです。

ありがとうございました。


EDIT:

はこれに私の方法を変更することで問題を解決:

$(document).on("click",".main",function(){ 
    $(this).next(".info").slideToggle("fast"); 
}); 

http://api.jquery.com/on/

を同様の問題がそれを見つけて、私は誰か包み、ここで元の質問を残します有用。

石工と一緒に http://www.infinite-scroll.com/の最新版について
+2

質問をマークするために解決して、あなたがあなたの質問に答える必要がありますそれを承認済みとしてマークします。編集の答えを質問にしないでください。 – Imp

+0

@Imp私はそれを試みたが、私はそうするために十分な評判を持っていない。 – Harry

+0

ちょっと待たなければならないと思います... –

答えて

0
$(document).on("click",".main",function(){ 
    $(this).next(".info").slideToggle("fast"); 
}); 
関連する問題