It's gonna be a long post, but I really had enough of trying to fix this. I'm really looking for some help solving my case.
First:
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
});
});
The problem here is after the ajax call of the next page, the fade stops working. So what I did is
$(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
});
});
But this will only work when I hover over the image then the image will fade out. If I do the same for $(".gallery ul li img.a").fadeTo
to .live(...)
nothing happens, it simply doesn't work.
- how can make this work even after an ajax call, which is supposed to fadeto when it loads then fadeout when i hover over it.
Second:
I have a small slider that slides up on the image, 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});
});
});
I changed $('.gallery li').hover(...)
to $('.gallery li').live("hover", function(){...})
but still it didn't work. Also I used .on
instead of .live
because it's deprecated.
What am I doing wrong ? I'm not a client side dude, most of my work is server side. I just need to make these 2 plugins work after the AJAX call happens.
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><</b></a>
and
$(document).on("keydown", "#pagenumber", function(e)
if ( e.which === 13 ) {
Dajaxice.gallery.gallerypages(Dajax.process, {'p': this.value});
}});
I'm not sure, but test this stuff:
JavaScript via 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><</b></a>
You were headed in the right direction with live
, but live
is depreciated for the on
event. With on
, you can include the selector as one of the arguments. The initial jQuery selector is only the container of the objects you want to add handlers to.
<div id="content">
<div class="sombutton"></div>
</div>
$( document ).ready( function() {
$( '#content' ).on( 'click', '.somebutton', function() {
alert( 'do something' );
} );
} );
Now even if we replace the content within the #conent
div, newly added content with the class .somebutton
will also have a click handler attached.
What you mention is a big problem, I refresh by hand. But I also use the .ajaxcomplete functionality. It runs every after every Ajax query
$(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: '...',});});
}
}
});
来源:https://stackoverflow.com/questions/11786717/making-jquery-plugins-work-after-an-ajax-call