Question

这是我的问题：我正在使用.hover()方法为jquery轮播添加一些类，并显示/隐藏与（this）具有相同ID的其他div。当悬停幻灯片元素“做某事”时。一切正常，直到旋转木马进入第二轮。我的意思是当第一个轮播项目作为最后一个时，.hover()方法根本不起作用，直到第一个项目再次出现在他的第一个位置。

我的轮播看起来像这样：http://jquery.malsup.com/cycle2/demo/carousel.php#responsive（响应一个）

这是我的.hover()功能：

jQuery(' slide_element ').hover( function(e)  {
        var currentAttrValue = jQuery(this).find("a").attr('id');
        // Show/Hide
        jQuery("#" + currentAttrValue).show().siblings().hide();
            $(" slide_element a ").removeClass('active');
            $(this).find("a").addClass('active');
        e.preventDefault();
    });

再一次：一切正常，直到第二轮来。

在使用相同的旋转木马和fancybox之前我遇到了这个问题。然后我找到了解决方案。

提前致谢！

Answer 1

使用下面的代码。你需要使用event delegation。事件委托允许我们将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有后代触发，无论这些后代现在是存在还是将来添加。

jQuery(document).on('mouseenter',' slide_element ',function(e)  {
    var currentAttrValue = jQuery(this).find("a").attr('id');
    // Show/Hide
    jQuery("#" + currentAttrValue).show().siblings().hide();
        $(" slide_element a ").removeClass('active');
        $(this).find("a").addClass('active');
    e.preventDefault();
});

为什么旋转木马悬停不起作用

1 个答案: