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

Question

这是我的问题：我正在为 jquery 轮播使用 .hover() 方法来添加一些 class 和 show/hide 其他具有相同 ID 的 div （这个）。将鼠标悬停在幻灯片元素上时 "do something"。一切正常，直到轮播出现在第二轮。我的意思是，当第一个轮播项目作为最后一个出现时， .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();
    });

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

我在使用相同的carousel 和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();
});

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

Why carousel hover is not working

jquery

hover

carousel