讓jquery插件在Ajax調用後工作

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到做同樣的事情，則什麼都不會發生，它根本行不通。

• 即使在ajax調用之後，如何在調用ajax時調用這個函數，當它被加載後應該淡入淡出，當我將它懸停在淡出時，該如何工作。

二：

我有一個小滑塊在圖像上向上滑動時，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

我不知道，但測試這個東西：通過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> 

Answer 2

您與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格中的內容，新添加的內容與類.somebutton也會有附加一個單擊處理。

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