4

我需要使用“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 功能有效）。请告诉我，我在哪里做错了？谢谢你。

4

2 回答 2

5

最容易做的事情可能是单独绑定mouseenter（mouseleave这就是hover无论如何）。这是该方法的 jQuery源代码.hover()：

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()，所以你可以坚持下去。

于 2012-07-12T07:24:17.470 回答
0

根据jQuery API 文档，“hover”伪事件名称（用于“mouseenter mouseleave”）自 v1.8 起已弃用，您必须使用两个事件处理程序而不是：

$('.field').on({mouseenter: function (e) { /* code */ },
                mouseleave: function (e) { /* code */ }
});
于 2012-07-12T07:27:25.127 回答