diff --git a/addons/web/static/src/legacy/js/widgets/colorpicker.js b/addons/web/static/src/legacy/js/widgets/colorpicker.js
index ccfe4b2a914..2569ee30c84 100644
--- a/addons/web/static/src/legacy/js/widgets/colorpicker.js
+++ b/addons/web/static/src/legacy/js/widgets/colorpicker.js
@@ -39,28 +39,6 @@ var ColorpickerWidget = Widget.extend({
         this.uniqueId = uniqueId("colorpicker");
         this.selectedHexValue = '';
 
-        // Needs to be bound on document to work in all possible cases.
-        const $document = $(
-            parent.options.ownerDocument ||
-            (parent.el && parent.el.parentElement && parent.el.ownerDocument)
-            || (parent.options && parent.options.$editable && parent.options.$editable[0] && parent.options.$editable[0].ownerDocument)
-            || document);
-
-        this.throttleOnMouseMove = throttleForAnimation((ev) => {
-            this._onMouseMovePicker(ev);
-            this._onMouseMoveSlider(ev);
-            this._onMouseMoveOpacitySlider(ev);
-        });
-        $document.on(`mousemove.${this.uniqueId}`, this.throttleOnMouseMove);
-        $document.on(`mouseup.${this.uniqueId}`, debounce((ev) => {
-            if (this.pickerFlag || this.sliderFlag || this.opacitySliderFlag) {
-                this._colorSelected();
-            }
-            this.pickerFlag = false;
-            this.sliderFlag = false;
-            this.opacitySliderFlag = false;
-        }, 10));
-
         this.options = Object.assign({}, options);
     },
     /**
@@ -100,6 +78,28 @@ var ColorpickerWidget = Widget.extend({
         });
         resizeObserver.observe(this.el);
 
+        // Needs to be bound on document to work in all possible cases.
+        const parent = this.getParent();
+        const $document = $(
+            parent.options.ownerDocument ||
+            (parent.el && parent.el.parentElement && parent.el.ownerDocument)
+            || (parent.options && parent.options.$editable && parent.options.$editable[0] && parent.options.$editable[0].ownerDocument)
+            || document);
+        this.throttleOnMouseMove = throttleForAnimation((ev) => {
+            this._onMouseMovePicker(ev);
+            this._onMouseMoveSlider(ev);
+            this._onMouseMoveOpacitySlider(ev);
+        });
+        $document.on(`mousemove.${this.uniqueId}`, this.throttleOnMouseMove);
+        $document.on(`mouseup.${this.uniqueId}`, debounce((ev) => {
+            if (this.pickerFlag || this.sliderFlag || this.opacitySliderFlag) {
+                this._colorSelected();
+            }
+            this.pickerFlag = false;
+            this.sliderFlag = false;
+            this.opacitySliderFlag = false;
+        }, 10));
+
         this.previewActive = true;
         return this._super.apply(this, arguments);
     },