在选择器元素类更改后重新初始化jQuery函数？

Question

我有两个jQuery函数为相同的元素提供不同的功能。

这是我的基本的HTML标记：

<ul> 
    <li class="active"> 
    <a href="#head1" data-toggle="tab" class="fade"> 
     <img src="head1_down.jpg" /> 
    </a> 
    </li> 
    <li> 
    <a href="#head2" data-toggle="tab" class="fade"> 
     <img src="head2_down.jpg" /> 
    </a> 
    </li> 
    <li> 
    <a href="#head3" data-toggle="tab"> 
     <img src="head2_down.jpg" /> 
     <!-- Does not fade! No .fade class on link tag. --> 
    </a> 
    </li> 
</ul> 

第一功能lookFade()添加淡入效果，改变所述图像的上mousehover源：

// Helper functions 
$.fn.lookUp = function() { 
    $(this).attr('src', function(i,val) { return val.replace('down.jpg', 'up.jpg') }); 
    return $(this); 
} 

$.fn.lookDown = function() { 
    $(this).attr('src', function(i,val) { return val.replace('up.jpg', 'down.jpg') }); 
    return $(this); 
} 

$.fn.lookFade = function() { 
    $(this).hover(
    function() { 
     $(this).fadeOut(function() { 
     $(this).lookUp().fadeIn(); 
     }) 
    }, 
    function() { 
     $(this).fadeOut(function() { 
     $(this).lookDown().fadeIn(); 
     }) 
    } 
); 
    return $(this); 
} 

// Change .active image on pageload 
$('li.active > a.fade > img').lookUp(); 

// Fade effect on hover 
$('li:not(.active) > a.fade > img').lookFade(); 

第二个功能切换内容当链接项目被点击时，窗格（没有在标记中显示，这是可行的！）。它还会更改链接标记中的图像，并将.active类从当前li元素更改为clicked li元素。

// Toggle tabs and change .active 
$('a[data-toggle="tab"]').click(function() { 
    var head = $(this).attr('href'); 
    var active = "#" + $('.pane.active').attr('id'); 
    if (head != active) { 
    $(active).removeClass('active'); 
    $(head).addClass('active'); 
    $(this).children('img').lookUp(); 
    $(this).parent().parent().children('li.active').removeClass('active'); 
    $(this).parent().addClass('active'); 
    } 
}); 

问题：当点击它的工作内容窗格改变，甚至类得到正确调整的链接。但lookFade()函数无法识别类变化，并且仍然为now .active li元素淡出（并且对于那些通过单击丢失此类的人不会）。

感谢您的阅读。我期待您的帮助:)

Answer 1

更改元素的类不会更改绑定到它的事件。事件绑定到元素，而不是类。如果你想这种类型的功能，使用事件代表团.on()或.delegate()

由于您使用插件来执行这些操作，就不会那么容易使其工作。我会抛弃lookFade方法并使用事件委托绑定lookFade事件（mouseenter和mouseleave）。

简单的例子：

$('ul').delegate('li:not(.active) > a.fade > img','mouseenter',function(){ 
    $(this).fadeOut(function() { 
     $(this).lookUp().fadeIn(); 
    }); 
});