jQuery：仍然作用於舊選擇的功能

Question

我有一個作用於選擇（通過參數'sel'傳遞）的函數：當我將鼠標懸停在選擇項上時，另一個元素相同的選擇（'.extLink'）是動畫。 功能是：

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

通過點擊網頁中的某些元素的選擇變化。但是恰巧，儘管選擇正確地改變了，但是即使對於之前選擇的項目，該功能也繼續工作，即，當我傳遞這些項目時.extLink也是動畫。

我做了一些測試，看到選擇正確完成。因此，這種行爲的原因是什麼？我做錯了什麼？

在其上功能作用如下（從DOM中提取）的HTML：

<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裏面有一個.xt鏈接;
• 我傳遞給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中;
• 現在a.extLink是動畫，當我不僅在li.ref-y（即li.attivo）上移動鼠標，而且在li.ref-x上移動鼠標時，儘管它們不再具有'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 

限制的背景下

限額內sel上下文extLink秒。

function animo(sel) { 

    sel.hover(  

    function() {  

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

    },   


    function() {  

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

    }  

); 

}