From 20035c1450faedb123824791ed2d97a62d971f42 Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Wed, 24 Dec 2025 15:06:26 +0530 Subject: [PATCH] Fix the jQuery 4.0 related issue in media uploader --- src/js/_enqueues/vendor/plupload/wp-plupload.js | 14 ++++++++++++-- src/js/media/controllers/cropper.js | 2 +- src/js/media/views/button.js | 2 +- 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/js/_enqueues/vendor/plupload/wp-plupload.js b/src/js/_enqueues/vendor/plupload/wp-plupload.js index c0eb570657bf4..ffae5ac069385 100644 --- a/src/js/_enqueues/vendor/plupload/wp-plupload.js +++ b/src/js/_enqueues/vendor/plupload/wp-plupload.js @@ -68,10 +68,20 @@ window.wp = window.wp || {}; */ $.extend( true, this, options ); - // Proxy all methods so this always refers to the current instance. + /* + * Bind all methods so this always refers to the current instance. + * Note: Using .bind() creates new function references. If these bound functions + * are used with jQuery event handlers, be aware that jQuery's event subsystem + * tracks functions by reference. The bound function will be seen as a single + * function even when binding different contexts, which can make unbinding + * specific handlers difficult. Use unique event namespaces (e.g., 'click.myproxy1') + * when binding and unbinding to avoid removing the wrong handler. + * + * Ref - https://api.jquery.com/jQuery.proxy/ + */ for ( key in this ) { if ( typeof this[ key ] === 'function' ) { - this[ key ] = $.proxy( this[ key ], this ); + this[ key ] = this[ key ].bind( this ); } } diff --git a/src/js/media/controllers/cropper.js b/src/js/media/controllers/cropper.js index b0a7a394400e5..2685f743ea8c7 100644 --- a/src/js/media/controllers/cropper.js +++ b/src/js/media/controllers/cropper.js @@ -116,7 +116,7 @@ Cropper = wp.media.controller.State.extend(/** @lends wp.media.controller.Croppe selection.set({cropDetails: controller.state().imgSelect.getSelection()}); this.$el.text(l10n.cropping); - this.$el.attr('disabled', true); + this.$el.prop( 'disabled', true ); controller.state().doCrop( selection ).done( function( croppedImage ) { controller.trigger('cropped', croppedImage ); diff --git a/src/js/media/views/button.js b/src/js/media/views/button.js index 988c95ccb1bf3..5b380d13d19f0 100644 --- a/src/js/media/views/button.js +++ b/src/js/media/views/button.js @@ -64,7 +64,7 @@ var Button = wp.media.View.extend(/** @lends wp.media.view.Button.prototype */{ classes = _.uniq( classes.concat( this.options.classes ) ); this.el.className = classes.join(' '); - this.$el.attr( 'disabled', model.disabled ); + this.$el.prop( 'disabled', model.disabled ); this.$el.text( this.model.get('text') ); return this;