use .on, not .eventname

source/Ox.UI/Ox.UI.js

@@ -387,8 +387,10 @@ Ox.load.UI = function(options, callback) {
                 opacity: error ? 0.9 : 0
             }, 1000, function() {
                 if (error) {
-                    $div.click(function() {
-                        $div.remove();
+                    $div.on({
+                        click: function() {
+                            $div.remove();
+                        }
                     });
                 } else {
                     clearInterval(loadingInterval);

source/Ox.UI/js/Core/Element.js

@@ -156,7 +156,7 @@ Ox.Element = function(options, self) {
                     clientY = e.clientY;
                     Ox.UI.$window
                         .off('mouseup', mouseup)
-                        .mousemove(mousemove)
+                        .on({mousemove: mousemove})
                         .one('mouseup', function(e) {
                             // stop checking for mouserepeat
                             clearInterval(mouseInterval);

source/Ox.UI/js/Form/Checkbox.js

@@ -71,7 +71,7 @@ Ox.Checkbox = function(options, self) {
                 width: getTitleWidth()
             })
             .css({float: 'right'})
-            .click(clickTitle)
+            .on({click: clickTitle})
             .appendTo(that);
     }
 

source/Ox.UI/js/Form/Input.js

@@ -209,9 +209,11 @@ Ox.Input = function(options, self) {
         .css({
             float: 'left' // fixme: use css rule
         })
-        .click(function() {
-            // fixme: ???
-            // that.focus();
+        .on({
+            click: function() {
+                // fixme: ???
+                // that.focus();
+            }
         })
         .appendTo(that);
     }
@@ -224,11 +226,11 @@ Ox.Input = function(options, self) {
                     title: 'left',
                     type: 'image'
                 })
-                .css({
-                    float: 'left'
-                })
-                .click(function() {
-                    clickArrow(0);
+                .css({float: 'left'})
+                .on({
+                    click: function() {
+                        clickArrow(0);
+                    }
                 })
                 .appendTo(that),
             Ox.Button({
@@ -236,11 +238,11 @@ Ox.Input = function(options, self) {
                     title: 'right',
                     type: 'image'
                 })
-                .css({
-                    float: 'right'
-                })
-                .click(function() {
-                    clickArrow(1);
+                .css({float: 'right'})
+                .on({
+                    click: function() {
+                        clickArrow(0);
+                    }
                 })
                 .appendTo(that)
         ]

source/Ox.UI/js/Form/InputGroup.js

@@ -31,7 +31,7 @@ Ox.InputGroup = function(options, self) {
             value: setValue
         })
         .addClass('OxInputGroup')
-        .click(click);
+        .on({click: click});
 
     if (Ox.isEmpty(self.options.value)) {
         self.options.value = getValue();

source/Ox.UI/js/Menu/MainMenu.js

@@ -21,8 +21,10 @@ Ox.MainMenu = function(options, self) {
             })
             .options(options || {})
             .addClass('OxMainMenu Ox' + Ox.toTitleCase(self.options.size)) // fixme: bar should accept small/medium/large ... like toolbar
-            .click(click)
-            .mousemove(mousemove);
+            .on({
+                click: click,
+                mousemove: mousemove
+            });
 
     self.focused = false;
     self.selected = -1;

source/Ox.UI/js/Video/LargeVideoTimeline.js

@@ -42,8 +42,10 @@ Ox.LargeVideoTimeline = function(options, self) {
                 width: setWidth
             })
             .addClass('OxLargeVideoTimeline OxMedia')
-            .mouseleave(mouseleave)
-            .mousemove(mousemove);
+            .on({
+                mouseleave: mouseleave,
+                mousemove: mousemove
+            });
 
     if (!self.options.disabled) {
         that.bindEvent({

source/Ox.UI/js/Video/VideoAnnotationPanel.js

@@ -296,19 +296,21 @@ Ox.VideoAnnotationPanel = function(options, self) {
 
     self.$editor = Ox.Element()
         .addClass('OxVideoAnnotationPanel OxMedia')
-        .mousedown(function(e) {
-            var $target = $(e.target);
-            !$target.is('.OxPosition') && !$target.is('input') && that.gainFocus();
-            // the following is needed to determine
-            // how to handle annotation input blur
-            if (self.editing) {
-                self.focused = true;
-                setTimeout(function() {
-                    // annotation folder will gain focus on blur
-                    // so we need to get focus back
-                    that.gainFocus();
-                    self.focused = false;
-                }, 25);
+        .on({
+            mousedown: function(e) {
+                var $target = $(e.target);
+                !$target.is('.OxPosition') && !$target.is('input') && that.gainFocus();
+                // the following is needed to determine
+                // how to handle annotation input blur
+                if (self.editing) {
+                    self.focused = true;
+                    setTimeout(function() {
+                        // annotation folder will gain focus on blur
+                        // so we need to get focus back
+                        that.gainFocus();
+                        self.focused = false;
+                    }, 25);
+                }
             }
         });