Question

我有这段代码：

$('.ui-datepicker-calendar tr').live('mouseleave', function() { 
    $(this).find('td a').removeClass('ui-state-hover'); 
});

这会影响页面上的所有日期选择器。我想定位一个特定的日期选择器，所以我这样做：

var specificPicker = $(this).datepicker("widget");

我想做：

$(specificPicker).find('.ui-datepicker-calendar tr').live('mouseleave', function() { 
    $(this).find('td a').removeClass('ui-state-hover'); 
});

但live()不支持链接。

该文档表明已弃用live()，我应该使用on()，但如果我使用.on而不是.live替换两种调用方法中的任何一种，则不起作用。

我怎样才能使这个工作？

Answer 1

由于.live()的工作方式，你无法做到这一点。它将事件附加到文档本身，然后在调用$('...')之前检查事件来自的元素是否与.live()使用的选择器匹配。

使用.on()的正确方法是：

$('existing-element-selector')
    .on('mouseleave', '.dynamic-element-selector', callbackFunction);

在你的情况下就是这样：

$(specificPicker).on('mouseleave', '.ui-datepicker-calendar tr', function() {
    // ...
});

Answer 2

用.live()替换.on()不是查找和替换操作。

你需要改变这个：

$("selector").live("event", handler);

对此：

$("base-selector").on("event", "descendant-selector", handler);

base-selector和descendant-selector的值必须来自最初的selector;您可以将document用作base-selector并将descendant-selector设置为selector用于直接转换的任何内容。

所以，为了达到与此相同的行为：

$(specificPicker).find('.ui-datepicker-calendar tr')
.live('mouseleave', function() { 
    $(this).find('td a').removeClass('ui-state-hover'); 
});

这样做：

$(specificPicker).on("mouseleave", '.ui-datepicker-calendar tr', function() { 
    $(this).find('td a').removeClass('ui-state-hover'); 
});

Answer 3

如果你要坚持使用你正在使用的jQuery版本，那么坚持使用live()，试试这个......

$(specificPicker).find('.ui-datepicker-calendar tr').each(function() {
    $(this).live('mouseleave', function() {
        $(this).find('td a').removeClass('ui-state-hover');
    });
});

只需使用each()来解析所选元素并将事件处理程序附加到它们。

如何在Jquery中使用链接选择器的.live（）？

3 个答案: