3

長い投稿になりますが、これを修正しようとするのは本当に十分でした。私は自分のケースを解決するための助けを本当に探しています。

初め：

fade.js:

$(document).ready(function(){
$(".gallery ul li img.a").fadeTo("slow", 0.5); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".gallery ul li img.a").hover(function(){
    $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
},function(){
    $(this).fadeTo("slow", 0.5); // This should set the opacity back to 30% on mouseout
});
});

ここでの問題は、次のページの ajax 呼び出しの後、フェードが機能しなくなることです。だから私がしたことは

$(document).ready(function(){
$(".gallery ul li img.a").fadeTo("slow", 0.5); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".gallery ul li img.a").live("hover", function(){
    $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
},function(){
    $(this).fadeTo("slow", 0.5); // This should set the opacity back to 30% on mouseout
    });
});

しかし、これは画像の上にカーソルを置いたときにのみ機能し、画像がフェードアウトします。私が同じことを$(".gallery ul li img.a").fadeToして.live(...)も何も起こらない場合、それは単に機能しません。

  • ajax呼び出しの後でもこれを機能させるにはどうすればよいですか。これは、ロード時にフェードアウトし、ホバーするとフェードアウトするはずです。

2番：

画像上を上にスライドする小さなスライダーがありますslider.js:

$(document).ready(function(){
    //To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Full Caption Sliding (Hidden to Visible)
        $('.gallery li').hover(function(){
            $(".cover", this).stop().animate({top:'106px'},{queue:false,duration:160});
        }, function() {
            $(".cover", this).stop().animate({top:'153px'},{queue:false,duration:160});
        });
    });

に変更$('.gallery li').hover(...)しまし$('.gallery li').live("hover", function(){...})たが、それでも機能しませんでした。また、推奨されていないため、.on代わりに使用しました。.live

私は何を間違っていますか？私はクライアント側の男ではありません。私の仕事のほとんどはサーバー側です。AJAX 呼び出しが発生した後、これら 2 つのプラグインを機能させる必要があります。

アヤックス:

@dajaxice_register
def gallerypages(request, p):

try:
    page = int(p)
except:
    page = 1

items = gallerylist(page)
html = render_to_string('gallery_content.html',
                                {'items': items,}, 
                                context_instance = RequestContext(request))

dajax = Dajax()
dajax.assign('#gallery-content', 'innerHTML', html)
return dajax.json()

編集2:

<a href="#" onclick="Dajaxice.gallery.gallerypages(Dajax.process, {'p': {{ items.previous_page_number }},})" class="btn_prev"><b>&lt;</b></a>

と

$(document).on("keydown", "#pagenumber", function(e)
    if ( e.which === 13 ) {
    Dajaxice.gallery.gallerypages(Dajax.process, {'p': this.value});
}});
4

3 に答える 3

1

よくわかりませんが、次のことをテストしてください。

jQuery 経由の JavaScript

var initFade = function() {
    $(".gallery ul li img.a").fadeTo("slow", 0.5);
}

// your custom callback method
var reBindStuffs = function(data) {
    Dajax.process(data);
    // rebind your jquery event handlers here... e.g.
    initFade();
};

$(document).ready(function(){

    // initial first time loaded fade
    initFade();

    // hover live binder
    $(".gallery ul li img.a").live("hover", function(){
        $(this).fadeTo("slow", 1.0);
    },function(){
        $(this).fadeTo("slow", 0.5);
    });

    // document keydown listener 
    $(document).on("keydown", "#pagenumber", function(e)
        if ( e.which === 13 ) {
        Dajaxice.gallery.gallerypages('reBindStuffs', {'p': this.value});
    }});
});

HTML

<!-- a click listener -->
<a href="#" onclick="Dajaxice.gallery.gallerypages(reBindStuffs, {'p': {{ items.previous_page_number }},})" class="btn_prev"><b>&lt;</b></a>
于 2012-08-03T00:52:06.177 に答える
0

あなたは で正しい方向に向かっていましたがlive、イベントliveのために減価償却されています。onではon、引数の 1 つとしてセレクターを含めることができます。最初の jQuery セレクターは、ハンドラーを追加するオブジェクトのコンテナーにすぎません。

<div id="content">
    <div class="sombutton"></div>
</div>

$( document ).ready( function() {
   $( '#content' ).on( 'click', '.somebutton', function() {
      alert( 'do something' );
   } );
} );

#conentこれで、 div内のコンテンツを置き換えても、クラスに新しく追加されたコンテンツ.somebuttonにもクリック ハンドラーがアタッチされます。

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

于 2012-08-02T22:41:48.747 に答える