Currently I have the below jQuery which uses the colorbox plugin http://colorpowered.com/colorbox/
$(document).ready(function(){
$(".altbgcolor").hover(function() {
$(this)
.addClass('altbgcolor-active')
.find(".sharedp")
.slideDown('slow');
},function () {
$(this)
.removeClass('altbgcolor-active')
.find(".sharedp")
.slideUp('slow');
});
$(".example7").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
)};
});
I want to convert both the hover functionality and the colorbox function to jQuery .live() so that any new elements added at runtime live, without refreshing the page, has the jQuery attached to them.
Can anyone help me with same? I tried for the hover event using below code, but it seems to record only the mouse enter event
$(".altbgcolor").live('hover',function() {
$(this)
.addClass('altbgcolor-active')
.find(".sharedp")
.slideDown('slow');
},function () {
$(this)
.removeClass('altbgcolor-active')
.find(".sharedp")
.slideUp('slow');
});
Please help!
EDIT:
Used the below solution, it works and though the .addClass('altbgcolor-active') seems to be working fine for the newly dynamically added elements, the .slideDown('slow') or .slideUp('slow') isnt working properly
$(function() {
$(".altbgcolor").live('mouseenter', function() {
//hover code
$(this)
.addClass('altbgcolor-active')
.find(".sharedp")
.slideDown('slow');
}).live('mouseleave', function() {
//stopped hovering code
$(this)
.removeClass('altbgcolor-active')
.find(".sharedp")
.slideUp('slow');
});
});
Can someone please guide whats going wrong. You can see the demo of the problem at http://mashup2.sunnydsouza.com just scroll down the page and click 'more' button to fetch the new dynamic elements. They dont show the slideDown(), slideUp() effects :(