Question

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 🙁

Answer 1

hover is troublesome when used with live(). Instead, use mouseover and mouseout. From the jQuery docs:

As of jQuery 1.4.3, you can bind multiple live event handlers simultaneously by passing a map of event type/handler pairs:

$(".altbgcolor").live({
  mouseover: function() {
    $(this)
        .addClass('altbgcolor-active')
        .find(".sharedp")
        .slideDown('slow');
  },
  mouseout: function() {
    $(this)
        .removeClass('altbgcolor-active')
        .find(".sharedp")
        .slideUp('slow');
  }
});

EDIT: in response to the request for help with demo – check the HTML you are inserting as part of the “More” button’s functionality. The new HTML does not contain the .sharedp div that your code is referencing, and appears to have been inserted a level too deep. Insert the correct HTML and the code will work.