javascript - 如何将 'hover' 函数更改为 'on' 函数？

Question

我需要使用“on”功能而不是“hover”。这是旧代码:

        $('.field').hover(
        function() 
        {
            old_value=$(this).text();
            item_id=$(this).attr('id');
            item=$(this).parent('td');
            new_value=(old_value=='Not translated') ? '' : old_value;

            $(this).empty(); 
            var field="<div id='save_button' class='btn btn-primary' style='float: right' href='#'>Save</div><form>"+
                "<div style='overflow: hidden; padding-right: .5em;'>"+
                "<input id='new_value' type='textarea' name='term' style='width: 100%;' value='"+new_value+"'/></div></form>";
            $(this).html(field);
        },
        function() 
        {

            $(this).empty();
            $(this).html(old_value);
        });

这是新代码:

        $('.field').on('hover',
        function(event) 
        {
            old_value=$(this).text();
            item_id=$(this).attr('id');
            item=$(this).parent('td');
            new_value=(old_value=='Not translated') ? '' : old_value;

            $(this).empty(); 
            var field="<div id='save_button' class='btn btn-primary' style='float: right' href='#'>Save</div><form>"+
                "<div style='overflow: hidden; padding-right: .5em;'>"+
                "<input id='new_value' type='textarea' name='term' style='width: 100%;' value='"+new_value+"'/></div></form>";
            $(this).html(field);
        },
        function(event) 
        {

            $(this).empty();
            $(this).html(old_value);
        });

旧代码运行良好，但新代码不起作用(仅 mouseout 函数可用)。请告诉我，我哪里弄错了？谢谢。

Answer 1

最简单的做法可能是分别绑定(bind)到 mouseenter 和 mouseleave(这正是 hover 所做的)。这是 jQuery source of the .hover() method :

function (fnOver, fnOut) {
    return this.mouseenter(fnOver).mouseleave(fnOut || fnOver);
}

您可以将事件名称映射传递给事件处理程序到 .on() :

$('.field').on({
    mouseenter: function (event) {
        // First function passed to hover
    },
    mouseleave: function (event) {
        // Second function passed to hover
    }
});

但是 .hover() 没有任何问题，因此您可以坚持使用它。