3

AJAX を介して読み込まれる以下のコンテンツがあります。

<div class="grid">
    <div class="thumb">
        <img alt="AlbumIcon" src="some-image.jpg">
        <div style="bottom:-75px;" class="meta">
            <p class="title">Title</p>
            <p class="genre"> <i class="icon-film icon-white"></i>
                Genre
            </p>
        </div>
    </div>
</div>

さらに、上記の「div.grid」に適用される次のスクリプトを jquery で作成しました。

 jQuery(function ($) {

    $(document).ready(function () {
        $(".grid").on({
            mouseenter : function () {
                $(this).find('.meta').stop().animate({
                    bottom:'0px'
                },200);
            },

            mouseleave : function () {
                $(this).find('.meta').stop().animate({
                    bottom:'-75px'
                },200);
            }
        });   
     });  
  });

ページが初めてロードされると、スクリプトは正常に機能します。ただし、「a」タグをクリックした後、AJAX を介して上記の div が生成されると、ホバー効果は機能しません。ここで何が問題なのか理解できないようですか？このすべてに新しい。誰でも助けることができますか？

4

4 に答える 4

0

hover次の関数を使用できます。

jQuery(function ($) {

$(document).ready(function () {
    $(".grid").hover(function () { /*mouseenter*/
            $(this).find('.meta').stop().animate({
                bottom:'0px'
            },200);
        },function(){ /*mouseleave*/
            $(this).find('.meta').stop().animate({
                bottom:'-75px'
            },200);
        }
    });   
});

説明：

最初のパラメーター関数は の作業をmouseenter行い、2 番目のパラメーター関数は の作業を行いmouseleaveます。

これらの両方を使用することをお勧めしmouseenterますmouseleave。また、ユーザーが要素からマウスを離したときにエフェクトを元に戻したくない場合に使用することをお勧めします。

于 2013-07-09T09:41:44.143 に答える
0

div を class=".grid" で上書きする ajax が原因でバインディングを失いました バインディングに親要素を使用します

$('.ParentElementClass').on("mouseleave", ".grid", function(){...})

jquery APIの詳細

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされたときに存在することが保証されている要素を選択することで、委任されたイベントを使用して、イベント ハンドラーを頻繁にアタッチおよび削除する必要がなくなります。この要素は、Model-View-Controller デザインのビューのコンテナー要素、またはイベント ハンドラーがドキュメント内のすべてのバブリング イベントを監視する必要がある場合はドキュメントのコンテナー要素である可能性があります。document 要素は、他の HTML をロードする前にドキュメントの head で使用できるため、ドキュメントの準備が整うのを待たずに安全にイベントをアタッチできます。

于 2013-07-09T09:31:51.553 に答える
0

ここで何を撮影しているのかわかりませんが、少し不正な HTML が原因である可能性があります...

jsFiddle デモ

<div class="grid">
    <div class="thumb">
        <img alt="AlbumIcon" src="some-image.jpg" />
        <div style="bottom:-75px;" class="meta">
            <p class="title">Title</p>
            <p class="genre"><i class="icon-film icon-white"></i>Genre</p>
        </div>
    </div>
</div>
     $(function () {
         $(".grid").on({
             mouseenter: function () {
                 alert('entered');
                 $(this).find('.meta').stop().animate({
                     bottom: '0px'
                 }, 200);
             },

             mouseleave: function () {
                 alert('left');
                 $(this).find('.meta').stop().animate({
                     bottom: '-75px'
                 }, 200);
             }
         }, ".thumb");
     });
 });

imgタグは必ず閉じてください。それらは断続的なグリッチを引き起こすことで有名です。

于 2013-07-09T09:31:56.600 に答える