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>

它的工作如下：

li.attivo;

• inside

• 单击页面的X元素(其他地方)，类'attivo‘被添加到li.ref-x (在示例li.ref-2中)；

• 同时将div.quadri从页面中的原始位置克隆出来，并附加到最后一个div.quadri -div.quadri存在a.extLink中；

• 传递给

• ()函数的选择是li.attivo，所以当我在li.attivo元素(因此也是div.quadri上)上移动鼠标时，a.extLink是动画的。

所有这些都很好，问题出现在以下几个方面：

当我单击页面的Y元素时，类'attivo‘被添加到li.ref-y (例如li.ref-3)中，并从li.ref-x中移除，然后从li.ref-x中移除div.quadri，并且当我将鼠标移动到li.ref-y (即li.attivo)和li.ref-x上时，会在 a.extLink中克隆一个不同的div.quadri，尽管它们不再是'attivo’类了。

Answer 1

在选择元素并在其上注册事件侦听器后，从元素中删除attivo类不会阻止调用侦听器，并且您的监听器只根据类名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中。

function animo( sel ) { 

  sel.hover(      

    function () {       

      sel.find( '.extLink' ).stop().animate( { right : '-5px' }, 'fast' );      

    },          


    function () {       

      sel.find( '.extLink' ).stop().animate( { right : '0' }, 'fast' );         

    }       

  );  

}