Question

I have this code:

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

This affects all datepickers on the page. I want to target a specific datepicker, so I do this:

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

I then want to do:

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

but live() does not support chaining.

The documentation suggests that live() is deprecated, and I should use on() but if I replace either of the two methods of calling with .on instead of .live, it doesn’t work.

How can I get this working?

Answer 1

You can’t do that due to the way .live() works. It attaches the event to the document itself and then checks if the element the event comes from matches the selector from the $('...') used right before calling .live().

The correct way to use .on() is this:

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

In your case that would be this:

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