Question

I have some tags that I want to bind to a function within jQuery’s datepicker. However, jQuery automatically binds another function to the parent (.ui-datepicker-inline) div’s mouseover and mouseout events.

I want to override this function in some cases, but when some other event occurs, revert back to default functioning. I tried binding mouseover to it’s parent div (hasDatepicker) and this worked fine. However when I unbind the parent, the child’s old bind function stops working as well. Why is this? Is there any way to avoid that? I don’t care if the child keeps it’s bind function, as long as the parent’s bind does it’s thing afterward. I also don’t want to lose the child functionality when I unbind the parent.

I have a jQuery element datePicker which is the element that has the original bind (.ui-datepicker-inline) as far as I can tell from the jQuery UI code.

// This binds my function, occurring after datePicker's bound function,
// and works fine.
datePicker.parent().bind('mouseover', hoverWeek) // hoverWeek is a function(event)

/* ... */

// This unbind's datePicker as well as datePicker.parent()
datePicker.parent().unbind('mouseover');

Can I save the bound function and put it back when I need it? I shouldn’t think I’d have to, but if I did, how would I even go about doing that? Can I just say datePicker.bind('mouseover') to get the function bound to it?

[Update]
There were a few issues: Mainly I had some conflicting code, but there were also some issues with the bubbling effect. The solutions listed below are both good, and for future reference, here is another solution that works: http://jsfiddle.net/redEvo/7QpDx/

Answer 1

You can pass just your function to the unbind call:

datePicker.parent().unbind('mouseover', hoverWeek);