Datepicker: bind hover events using delegate. Fixed #7256 - minimize event binding...

(cherry picked from commit 74d195e39681791545b3026a66bfa3f319237e5a)

diff --git a/ui/jquery.ui.datepicker.js b/ui/jquery.ui.datepicker.js
index 61c2b69b4ad43dfbfb77a3ea186cbf38ff8d13d6..d6419e2e36b9debccddb16ddcd57d3c98ba60aec 100644 (file)
--- a/ui/jquery.ui.datepicker.js
+++ b/ui/jquery.ui.datepicker.js
@@ -16,6 +16,7 @@ $.extend($.ui, { datepicker: { version: "@VERSION" } });
 
 var PROP_NAME = 'datepicker';
 var dpuuid = new Date().getTime();
+var instActive;
 
 /* Date picker manager.
    Use the singleton instance of this class, $.datepicker, to interact with the date picker.
@@ -107,7 +108,7 @@ function Datepicker() {
                autoSize: false // True to size the input for the date format, false to leave as is
        };
        $.extend(this._defaults, this.regional['']);
-       this.dpDiv = $('<div id="' + this._mainDivId + '" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>');
+       this.dpDiv = bindHover($('<div id="' + this._mainDivId + '" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>'));
 }
 
 $.extend(Datepicker.prototype, {
@@ -173,7 +174,7 @@ $.extend(Datepicker.prototype, {
                        drawMonth: 0, drawYear: 0, // month being drawn
                        inline: inline, // is datepicker inline or not
                        dpDiv: (!inline ? this.dpDiv : // presentation div
-                       $('<div class="' + this._inlineClass + ' ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>'))};
+                       bindHover($('<div class="' + this._inlineClass + ' ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>')))};
        },
 
        /* Attach the date picker to an input field. */
@@ -672,29 +673,13 @@ $.extend(Datepicker.prototype, {
        _updateDatepicker: function(inst) {
                var self = this;
                var borders = $.datepicker._getBorders(inst.dpDiv);
+               instActive = inst; // for delegate hover events
                inst.dpDiv.empty().append(this._generateHTML(inst));
                var cover = inst.dpDiv.find('iframe.ui-datepicker-cover'); // IE6- only
                if( !!cover.length ){ //avoid call to outerXXXX() when not in IE6
                        cover.css({left: -borders[0], top: -borders[1], width: inst.dpDiv.outerWidth(), height: inst.dpDiv.outerHeight()})
                }
-               inst.dpDiv.find('button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a')
-                               .bind('mouseout', function(){
-                                       $(this).removeClass('ui-state-hover');
-                                       if(this.className.indexOf('ui-datepicker-prev') != -1) $(this).removeClass('ui-datepicker-prev-hover');
-                                       if(this.className.indexOf('ui-datepicker-next') != -1) $(this).removeClass('ui-datepicker-next-hover');
-                               })
-                               .bind('mouseover', function(){
-                                       if (!self._isDisabledDatepicker( inst.inline ? inst.dpDiv.parent()[0] : inst.input[0])) {
-                                               $(this).parents('.ui-datepicker-calendar').find('a').removeClass('ui-state-hover');
-                                               $(this).addClass('ui-state-hover');
-                                               if(this.className.indexOf('ui-datepicker-prev') != -1) $(this).addClass('ui-datepicker-prev-hover');
-                                               if(this.className.indexOf('ui-datepicker-next') != -1) $(this).addClass('ui-datepicker-next-hover');
-                                       }
-                               })
-                       .end()
-                       .find('.' + this._dayOverClass + ' a')
-                               .trigger('mouseover')
-                       .end();
+               inst.dpDiv.find('.' + this._dayOverClass + ' a').mouseover();
                var numMonths = this._getNumberOfMonths(inst);
                var cols = numMonths[1];
                var width = 17;
@@ -1715,6 +1700,28 @@ $.extend(Datepicker.prototype, {
        }
 });
 
+/*
+ * Bind hover events for datepicker elements.
+ * Done via delegate so the binding only occurs once in the lifetime of the parent div.
+ * Global instActive, set by _updateDatepicker allows the handlers to find their way back to the active picker.
+ */ 
+function bindHover(dpDiv) {
+       var selector = 'button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a';
+       return dpDiv.delegate(selector, 'mouseout', function() {
+                       $(this).removeClass('ui-state-hover');
+                       if (this.className.indexOf('ui-datepicker-prev') != -1) $(this).removeClass('ui-datepicker-prev-hover');
+                       if (this.className.indexOf('ui-datepicker-next') != -1) $(this).removeClass('ui-datepicker-next-hover');
+               })
+               .delegate(selector, 'mouseover', function(){
+                       if (!$.datepicker._isDisabledDatepicker( instActive.inline ? dpDiv.parent()[0] : instActive.input[0])) {
+                               $(this).parents('.ui-datepicker-calendar').find('a').removeClass('ui-state-hover');
+                               $(this).addClass('ui-state-hover');
+                               if (this.className.indexOf('ui-datepicker-prev') != -1) $(this).addClass('ui-datepicker-prev-hover');
+                               if (this.className.indexOf('ui-datepicker-next') != -1) $(this).addClass('ui-datepicker-next-hover');
+                       }
+               });
+}
+
 /* jQuery extend now ignores nulls! */
 function extendRemove(target, props) {
        $.extend(target, props);