如何将 jQuery .live() 函数与 COLORBOX 插件和悬停事件一起使用

Question

目前我有以下使用颜色框插件http://colorpowered.com/colorbox/的jQuery

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

 });

我想将悬停功能和颜色框功能都转换为 jQuery .live() 以便在运行时实时添加的任何新元素，无需刷新页面，都会附加 jQuery。

任何人都可以帮助我吗？我尝试使用下面的代码进行悬停事件，但它似乎只记录了鼠标输入事件

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

请帮忙！

编辑：

使用下面的解决方案，它可以工作，虽然 .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 docs：

从 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，代码将起作用。