0

私はAJAXを使用して記事を表示するワードプレスサイトに取り組んでいます。成功コールバックにjqueryコードを追加しました。私のニーズの1つは、マウスオーバーで画像を表示することです。マウスオーバー効果を除いて、私のコードはすべて機能します。

だからこれは私のajax関数です：

function loadArticle(pageNumber, loop, term){    
    $.ajax({
        url: ajax_var.url,
        type:'POST',
        data: someData, 
        success: function(html){
            // This will be the div where our content will be loaded
            $("#content").append(html);    

            // Zoom box
            $('img.static').hide();
            $(".ad-preview").live({
                mouseover: function() {
                    $(this).find('img.static').stop().fadeIn();
                },
                mouseout: function() {
                    $(this).find('img.static').stop().fadeOut();
                }
            });

            //  Other stuff...
        });

        return false;
    }

});

およびHTML：

<div class="ad-preview">
    <a target="_blank" href="">
        <img src="img/zoom.png" /></a>            
    </a>
</div>

この効果を実装するための良い方法は何ですか？

4

2 に答える 2

2

.liveは、 .onに置き換えられたアクティブなリスナーです

これは、ajax呼び出しの外部、jsの基本レベルで配置します。つまり、document.ready呼び出しの内部や、他の関数の内部ではありません。これは、ajaxを介してロードされたdom要素で機能します。

于 2013-01-24T00:11:43.647 に答える
2

まず、おそらくではなくonliveを使用する必要があります。次に、委任されたハンドラーをコールバックに適用する必要はありません。それらはページに残っているより高いレベルの要素に委任されているため、ページの読み込み時に適用できます。

    $("body").on('mouseover', '.ad-preview', function() {
            $(this).find('img.static').stop().fadeIn();
    })
    .on('mouseout', '.ad-preview', function() {
            $(this).find('img.static').stop().fadeOut();
    });
于 2013-01-24T00:12:28.740 に答える