在Ajax調用之后使jquery插件工作

Question

這將是一個很長的帖子，但我真的有足夠的嘗試解決這個問題。 我真的在尋找一些幫助解決我的案子。

第一：

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做同樣的事情$(".gallery ul li img.a").fadeTo to .live(...)沒有任何反應，它根本不起作用。

• 甚至在ajax調用之后如何使這個工作，當它加載時應該淡入淡出然后當我將鼠標懸停在它上面時fadeout。

第二：

我有一個小滑塊在圖像上滑動， 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調用發生后使這兩個插件工作。

阿賈克斯：

@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()

EDIT2：

<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});
}});

Answer 1

你在正確的方向的戶主live ，但live是貶值了on事件。 使用on ，您可以將選擇器作為參數之一包含在內。 初始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/

Answer 2

我不確定，但測試這個東西：

JavaScript通過jQuery

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>

Answer 3

你提到的是一個大問題，我手工刷新。 但我也使用.ajaxcomplete功能。 每次Ajax查詢后都會運行它

$(document).ajaxComplete(function(){ 
    // Carga tabs por defecto por clases.
    if (typeof jQuery.fn.wf_responsivetab == 'function')
    {
        if ($('#rbtt_1').length)
        {
            $('#rbtt_1').wf_responsivetab({text: '...',});
            $(window).on('resize', function() {$('#rbtt_1').wf_responsivetab({text: '...',});});
        }
    }
});