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

 });

我想将悬停功能和颜色框功能转换为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，代码将起作用。

如何使用带有COLORBOX插件和悬停事件的jQuery .live（）函数

1 个答案: