jQuery - DOM更改後懸停

與$('#sidebar').toggleClass('small');即時通訊添加/刪除指定的類從#sidebar。jQuery - DOM更改後懸停

When #sidebar have class small當用戶將鼠標懸停在#sidebar.small上時，我應該可以執行其他操作。

我試圖實現與代碼波紋管：

$("#sidebar.small").on({ 
    mouseenter: function() { 
     alert(1); //doesn't work 
}, 
    mouseleave: function() { 
     //stuff to do on mouse leave 
    } 
});

但是，這並不工作。

我應該如何對更改後的DOM元素執行懸停功能？

來源

2015-04-06 RhymeGuy

您應該能夠使用jQuery的懸停的方法來做到這一點：https://api.jquery.com/hover/

更新：對不起注意到一件事......當您最初設置你的事件處理程序，確實#sidebar有CSS標籤或不？你的代碼被寫入的方式，如果它沒有，它會嘗試附加到元素$（「＃sidebar.small」），所以如果css標籤不存在，它將不會附加到任何東西。

我想你想更多的是這樣的：

$("#sidebar").on({ 
    mouseenter: function() { 
     if($('#sidebar').hasClass('small')) { 
      alert(1); 
     } 
    } 
});

更新再次錯字，對不起......

來源

2015-04-06 23:41:36 Brian

jQuery的唯一綁定的處理程序找到的元素在結合的時間。

解決方法是在添加類時重新綁定相應的處理程序。從小提琴

jsfiddle

代碼：

$('#foo').click(function(){ 
    $('<span></span>') 
    .text('A Span') 
    .appendTo('#container'); 
}); 

$('#bar').click(function(){ 
    $('span').first().toggleClass('small'); 
    bindHover();  
}) 

function bindHover(){ 
    $('span.small').unbind('hover'); // Avoid re-binding something 
    $('span.small').hover(function(){ 
     alert('a') 
    }); 
} 

bindHover();

來源

2015-04-06 23:54:10 Plato

我覺得這個工作，你只需要添加bindHover上$（「＃條」）點擊時，它是不是已經那裏...否則你會添加額外的綁定，你會得到更多的1警報。 – Brian

哦，你說得對。管道膠帶修復即將到來 – Plato

但老實說，我的答案太複雜了。我認爲OP需要爲動態元素做到這一點。單一的，總是存在的'＃sidebar' div的更好的解決方案是綁定一次懸停或者mouseenter，然後在處理程序中測試類，就像你在答案中演示的一樣。 – Plato

jQuery - DOM更改後懸停

回答

相關問題