将 .live() 转换为 .on()

Question

如何将这个旧的jQuery代码组合到v1.7 .on()中？

v1.3 .live() ：

    $('#results tbody tr').live({
    mouseenter:
       function () { $(this).find('.popup').show(); },
    mouseleave:
       function () { $(this).find('.popup').hide(); }
    });

v1.7 .on() ：

$('#results tbody').on('mouseenter', 'tr', function () {
    $(this).find('.popup').show();
});
$('#results tbody').on('mouseleave', 'tr', function () {
    $(this).find('.popup').hide();
});

我想将两个事件处理程序传递给一个.on()调用，但保留.on()允许我做的出色的事件委托。

Answer 1

您可以将事件映射作为第一个参数传递：

$('#results tbody').on({
    'mouseenter' : function () {
        $(this).find('.popup').show();
     },
    'mouseleave' : function () {
        $(this).find('.popup').hide();
    }
}, 'tr');

j查询文档：

.on( events-map [， selector] [， data] (，
事件地图字符串键表示一个或多个空格分隔的事件类型的映射，并且 可选命名空间，值表示要 要求事件。

Answer 2

我只想在一个对象中传递两个事件处理程序，就像我在第一个示例中所做的那样。

在这种情况下，您可以将这两个事件附加到一起，然后在处理程序本身中区分它们，如下所示：

$('#results tbody').on('mouseenter mouseleave', 'tr', function (e) {
    if (e.type == "mouseenter") {
        $(this).find('.popup').show();
    }
    else {
        $(this).find('.popup').hide();
    }
});

Answer 3

使用的格式在 live 文档中指定

$(document).on({...events...}, selector, data);

-或-

$(document).on(event, selector, data, callback);

1.7+ 中 live 函数的代码现在只是一个直通函数：

live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
}

Answer 4

以您的第一个示例并将live更改为on应该是您所需要的

 $('#results tbody tr').on({
mouseenter:
   function () { $(this).find('.popup').show(); },
mouseleave:
   function () { $(this).find('.popup').hide(); }
})

请参阅：http://api.jquery.com/on/#example-6