0

jQueryには、divにカーソルを合わせると消えて、代わりに別のdivが表示される関数があります。この関数は、無限スクロールにAjaxを使用してアイテムをロードするまでうまく機能します。私はそれが新しい要素をバインドすることに関係していることを知っています（私が読んだものから、on（）を使用して）、しかし私はjQueryに慣れていないので、この変更を実装する方法がわかりません。過去数時間ですが、前進していません。

（特定の問題：new_socialホバーは、新しくロードされたアイテムのajaxロードで壊れます）

特にコード形式で、どんな助けでも大歓迎です！本当にありがとう！

関数は次のとおりです。

$("a.share").hover(function(){
  $(this).closest($('div.new_story')).children("div.new_social_buttons").show();
  $(this).closest(".new_social").hide();
 },
 function(){
  });


$("div.new_social_buttons").hover(function(){

},
function(){
  $(this).hide();
   $(this).closest($('div.new_story')).children("div.new_social").show();
});

ajaxロード関数は次のとおりです。

jQuery.ias({
container : '#middle',
item: '.new_story',
pagination: '#pagination',
next: 'a.next',
loader: '<img src="loader.gif"/>',
history: false

 });

ここで無限スクロールを取得しました。関数呼び出しの背後にjQueryがあると思います： https ：//github.com/webcreate/Infinite-Ajax-Scroll

再度、感謝します！

4

1 に答える 1

-1

ページの読み込み中に存在する静的な親要素にイベントを委任する必要があるようです。

委任されたa.shareハンドラー

$(document).on({
    mouseenter: function(){
        $(this).closest($('div.new_story')).children("div.new_social_buttons").show();
        $(this).closest(".new_social").hide();
    },
    mouseleave: function(){
        //looks like nothing going on here; just providing for future ref.
    }
}, 'a.share');

委任されたdiv.new_social_buttonsハンドラー

$(document).on({
    mouseenter: function(){
        //looks like nothing going on here; just providing for future ref.
    },
    mouseleave: function(){
        $(this).hide();
        $(this).closest($('div.new_story')).children("div.new_social").show();
    }
}, 'div.new_social_buttons');

使用する場合、通常のラッパーメソッド.on()を使用することはできません。.hover()代わりに、mouseenter and内部で宣言された機能を備えたmouseleave`オブジェクトを提供する必要があります。

documentまた、パフォーマンスを節約するために、静的な親要素に置き換える必要があることに注意してください。jQueryの委任されたセレクターはjavascriptのquerySelectorAll（）メソッドを利用するため、パフォーマンスの向上はごくわずかですが、深くネストされたサイトでは負担になる可能性があります。これが、静的なツリー内のより低いものにバインドすることをお勧めする理由です。

于 2013-02-21T23:50:28.283 に答える