javascript - jqueryでonでホバー機能を変換する方法

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'使用することは推奨されないため、実際にはmouseenterand をmouseleave直接使用する必要があります。

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

またはこのように：

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

または、次のように短くします。

$("#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() }
})

編集:その場合に委任が必要かどうかは、あなたの質問では明確ではありません。他の回答を確認してください。