Как использовать функцию jQuery .live () с плагином COLORBOX и событием hover

Question

В настоящее время у меня есть jQuery, который использует плагин colorbox 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'); }
)};

 });

Я хочу преобразовать как функцию наведения, так и функцию colorbox в jQuery .live (), чтобы к любым новым элементам, добавленным во время выполнения, без обновления страницы, был прикреплен jQuery.

Может ли кто-нибудь помочь мне с тем же? Я пытался использовать событие hover, используя приведенный ниже код, но, похоже, он записывает только событие ввода мыши

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

Пожалуйста, помогите!

EDIT:

Использовало приведенное ниже решение, оно работает, и хотя .addClass ('altbgcolor-active'), кажется, работает нормально для вновь динамически добавляемых элементов, .slideDown ('slow') или .slideUp ('slow') не работает должным образом

 $(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');
            });
        });

Может кто-нибудь, пожалуйста, направлять, что происходит не так. Вы можете увидеть демонстрацию проблемы в http://mashup2.sunnydsouza.com, просто прокрутите страницу вниз и нажмите кнопку «еще», чтобы получить новые динамические элементы. Они не отображают эффекты slideDown (), slideUp (): (

Answer 1

hover неприятно при использовании с live().Вместо этого используйте mouseover и mouseout.Из документов jQuery :

Начиная с jQuery 1.4.3, вы можете одновременно связать несколько обработчиков живых событий, передав карту пар типа тип / обработчик:

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

РЕДАКТИРОВАТЬ: в ответ на запрос о помощи с демонстрацией - проверьте HTML-код, который вы вставляете как часть функциональности кнопки «Еще».Новый HTML не содержит .sharedp div, на который ссылается ваш код, и кажется, что он был вставлен слишком глубоко.Вставьте правильный HTML, и код будет работать.