これは複雑になる可能性があるため、自分の状況をできる限り説明しようとします。
私はこの jquery プラグインhttp://www.infinite-scroll.com/を masonry と共に使用しています: 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 を使用したことがなく、単に実験しているだけです)
これにより、無限スクロールによってロードされた新しい追加コンテンツでホバー機能が機能するようになりましたが、元のコンテンツと競合しました。
では、ホバー機能を実装して、Ajax 呼び出しの前後にロードされたすべての投稿に対して適切に機能するようにする最良の方法は何ですか?
ありがとう。
編集：
私の方法をこれに変更することで問題を解決しました：
$(document).on("click",".main",function(){
$(this).next(".info").slideToggle("fast");
});
同様の問題を抱えている人が役立つと思われる場合に備えて、元の質問をここに残します。