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');

jQuery documentation：

.on（events-map [，selector] [，data]），
events-map 一个映射，其中字符串键表示一个或多个以空格分隔的事件类型和可选的命名空间，值表示处理函数要求举办活动。

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);

-OR -

$(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

jQuery - 将.live（）转换为.on（）

4 个答案: