如何懸停功能轉換與jQuery中

Question

我有這樣的代碼

$("td").hover(function(){ 
       $(this).find('a.btn').show(); 
       }, function(){ 
       $(this).find('a.btn').hide(); 
      }) 

我如何轉換這個功能對新的DOM元素與on

Answer 1

$("#mytable").on('hover', 'td', function(){ 
    $(this).find('a.btn').show(); 
    }, function(){ 
    $(this).find('a.btn').hide(); 
}); 

但使用'hover'僞事件作爲替代傳球'mouseenter mouseleave'已棄用，因此您應該直接使用mouseenter和mouseleave。

$("#mytable").on('mouseenter', 'td', function(){ 
    $(this).find('a.btn').show(); 
}) 
.on('mouseleave', 'td', function(){ 
    $(this).find('a.btn').hide(); 
}); 

或者這樣：

或更短這樣的：

$("#mytable").on('mouseenter mouseleave', 'td', function(e){ 
    $(this).find('a.btn').toggle(e.type === 'mouseenter'); 
}); 

Answer 2

我會做這樣的：

$('td').on({ 
    mouseenter: function() { $(this).find('a.btn').show() } 
    mouseleave: function() { $(this).find('a.btn').hide() } 
}) 

編輯：這不是CLE如果您在這種情況下需要授權，請查看其他答案。