Question

我有一个导航功能，可以在鼠标悬停时淡入淡出文本颜色。它基于非活动类来执行此操作。

除了最初处于活动状态的页面外，它的效果非常好。

当我更改页面（通过ajax）时，我将'inactive'类添加到之前“活动”的元素中，但我的函数没有注意到它。我可以在Web检查器中看到正在删除活动类并正确添加非活动类。有什么建议吗？

('header#primary nav a.inactive').hover(
    function(){
        $(this).stop().animate({'color': '#ffffff'}, 'slow');
    },
    function() {
        $(this).stop().animate({'color': '#a2a2a2'}, 'slow');
    });

Answer 1

您需要使用jquery live函数来动态添加元素。

 $('header#primary nav a.inactive').live('mouseenter' ,function(){
            $(this).stop().animate({'color': '#ffffff'}, 'slow');
        }).live('mouseleave',
        function() {
            $(this).stop().animate({'color': '#a2a2a2'}, 'slow');
        });

http://api.jquery.com/live/

Answer 2

简答：改为使用.live()或.delegate()功能。 jQuery doco给出了它们如何工作的解释，并且您将拥有的唯一打嗝是代替您需要执行hover()和mouseenter()组合的快捷mouseleave()方法。

中等答案：

直接根据jQuery选择器分配事件处理程序（无论是悬停，单击等），如代码：

$('header#primary nav a.inactive').hover( /* your code */ );

说“在此刻找到与选择器匹配的所有DOM元素并为它们分配一个事件处理程序（悬停）”。它肯定不会注意到什么时候可以更改元素以匹配选择器，如果它们被更改为不再匹配，它也不会从元素中删除处理程序。

相反，您希望使用.live()或.delegate()，它将处理与或将来中的选择器匹配的元素的事件。

答案很长：哎呀，我没有时间写这个，而且你真的不需要我解释jQuery doco中涵盖.live()和.delegate()的方式。

功能没有看到新添加的类

2 个答案: