jQuery：仍然作用于旧选择的函数

Question

我有一个函数作用于选择（通过参数'sel'传递）：当我用鼠标悬停在选择中的项目时，同一选择中的另一个元素（'。extLink'）是动画。 功能是：

function animo(sel) { 
    sel.hover(      
        function () {       
            $('.extLink').stop().animate({right: '-5px'}, 'fast');      
        },          
        function () {       
            $('.extLink').stop().animate({right: '0'}, 'fast');         
        }       
    );  
}

通过单击页面的某些元素来更改选择。但实际上，尽管选择正确更改，该功能仍会继续工作，即使是以前选择的项目，也就是说，当我传递这些项目时，.extLink也会动画。

我做了一些测试，看到选择正确完成。这可能是造成这种行为的原因么？我做错了什么？

函数执行的HTML如下（从DOM中提取）：

<ul>
<li class="ref-1">310 Raccolte di statistiche generali</li>
<li class="ref-1">320 Scienza politica</li>
<li class="ref-2 attivo">330 Economia </li>
<li class="ref-2 attivo">340 Diritto
    <div class="quadri">
        <ul>
            <li>328 Il processo legislativo</li>
            <li>330 Economia</li>
            <li>340 Diritto</li>
        </ul>
        <a class="extLink" href="http://www...">...</a>
    </div>
</li>
<li class="ref-3">350 Amministrazione pubblica; arte militare</li>
<li class="ref-3">360 Problemi e servizi sociali; associazioni</li>
</ul>

它的工作原理如下：

• 点击页面的X元素（其他地方），将“attivo”类添加到li.ref-x（在示例中为li.ref-2）;
• 同时，div.quadri从页面中的原始位置克隆并附加到最​​后一个li.attivo;
div.quadri里面的
• 有a.extLink;
• 我传递给animo（）函数的选择是li.attivo，所以当我在li.attivo元素上移动鼠标时（因此也在div.quadri上）a.extLink是动画的。

所有这一切都运作良好，问题出现在：

• 当我单击页面的Y元素时，类'attivo'被添加到li.ref-y（例如li.ref-3）并从li.ref-x中删除，然后删除div.quadri来自li.ref-x，另一个div.quadri被克隆在li.ref-y;
中
• 现在当我不仅在li.ref-y（即li.attivo）上移动鼠标而且在li.ref-x上移动鼠标时a.extLink是动画的，尽管他们已经不再使用“attivo”类了。

Answer 1

在您选择元素并在其上注册事件侦听器之后从元素中删除attivo类将不会停止调用侦听器，并且您的侦听器仅基于类名{{1}执行动画而不是上下文。尝试以下其中一种：

从先前的选择中删除侦听器

extLink

使用委派的注册

这只会在事件发生时调用具有类var previous_sel = $(); function animo( sel ) { // Assumes jQuery 1.7 previous_sel.off( "mouseenter mouseleave" ); previous_sel = sel; // ... rest of your current function } 的元素的侦听器。

attivo

限制上下文

将上下文限制在function animo() { // Use appropriate selector to get the relevant UL var ul = $( "ul" ); var selector = "li.attivo"; ul.on( "mouseenter", selector, function () { ul.find( selector + ' .extLink' ).stop().animate( { right : '-5px' }, 'fast' ); } ); ul.on( "mouseleave", selector, function () { ul.find( selector + ' .extLink' ).stop().animate( { right : '0' }, 'fast' ); } ); } // animo 内的extLink。

sel