如何在jquery中使用.live（）和鏈式選擇器？

我有這樣的代碼：如何在jquery中使用.live（）和鏈式選擇器？

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

這會影響頁面上的所有datepickers。我想針對特定的日期選擇器，所以我這樣做：

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調用的兩種方法，這是行不通的。

我怎樣才能得到這個工作？

來源

2012-10-18 NibblyPig

你能定義你遇到的錯誤嗎？ – yoshi

由於.live()的工作方式，您無法這樣做。它將事件附加到文檔本身，然後檢查事件來自的元素是否與調用.live()之前使用的$('...')中的選擇器匹配。

使用.on()正確的方法是這樣的：

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

在你的情況，這將是這樣的：

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

來源

2012-10-18 12:08:30 ThiefMaster

非常感謝。不幸的是，儘管對特定的選擇器執行該操作，但它觸發了所有日期選擇器，因爲它們使用相同的div並且不使用唯一的ID，但我可以修復它！ – NibblyPig

與.on()更換.live()不是查找和替換操作。

您需要更改此：

$("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'); 
});

來源

2012-10-18 12:08:52 Jon

如果你要堅持使用jQuery的版本你正在使用，因此，堅持使用live()，試試這個...

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

只需使用each()解析選定的元素並將事件處理程序附加到它們。

來源

2012-10-18 12:10:54 Archer

如何在jquery中使用.live（）和鏈式選擇器？

回答

相關問題