i'm ugrading jQuery to version 3.6.0 in a project using jQuery qtip 3.0.3 (released on 11 May 2016). Also i'm using jQuery migrate 3.3.2, which is returning some deprecated functions of qtip, as qtip is not maintained anymore i want to change the mentioned methods by myself.
This is the qtip library i'm using: https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.js
The first deprecation message looks like:
JQMIGRATE: jQuery.fn.mousedown() event shorthand is deprecated migrateWarn @ jquery_migrate_3_3_2.js:100 jQuery.fn.<computed> @ jquery_migrate_3_3_2.js:682 S.fn.init @ jquery_3_6_0_min_1.js:2 jQuery.fn.init @ jquery_migrate_3_3_2.js:158 S @ jquery_3_6_0_min_1.js:2 init @ jquery_qtip_3_0_3.js:2724 OVERLAY @ jquery_qtip_3_0_3.js:2833 (anonymous) @ jquery_qtip_3_0_3.js:2835 (anonymous) @ jquery_qtip_3_0_3.js:25 (anonymous) @ jquery_qtip_3_0_3.js:28 (anonymous) @ jquery_qtip_3_0_3.js:3487 jquery_migrate_3_3_2.js:102 console.trace
The second deprecation message looks like:
JQMIGRATE: jQuery.fn.delegate() is deprecated migrateWarn @ jquery_migrate_3_3_2.js:100 delegate @ jquery_migrate_3_3_2.js:713 delegate @ jquery_qtip_3_0_3.js:1400 (anonymous) @ jquery_qtip_3_0_3.js:1672 e @ jquery_3_6_0_min_1.js:2 t @ jquery_3_6_0_min_1.js:2 setTimeout (async) (anonymous) @ jquery_3_6_0_min_1.js:2 c @ jquery_3_6_0_min_1.js:2 fireWith @ jquery_3_6_0_min_1.js:2 fire @ jquery_3_6_0_min_1.js:2 c @ jquery_3_6_0_min_1.js:2 fireWith @ jquery_3_6_0_min_1.js:2 ready @ jquery_3_6_0_min_1.js:2 B @ jquery_3_6_0_min_1.js:2 jquery_migrate_3_3_2.js:102 console.trace
The third deprecation message looks like:
JQMIGRATE: jQuery.fn.bind() is deprecated migrateWarn @ jquery_migrate_3_3_2.js:100 bind @ jquery_migrate_3_3_2.js:705 init @ jquery_qtip_3_0_3.js:2732 OVERLAY @ jquery_qtip_3_0_3.js:2833 (anonymous) @ jquery_qtip_3_0_3.js:2835 (anonymous) @ jquery_qtip_3_0_3.js:25 (anonymous) @ jquery_qtip_3_0_3.js:28 (anonymous) @ jquery_qtip_3_0_3.js:3487 jquery_migrate_3_3_2.js:102 console.trace migrateWarn @ jquery_migrate_3_3_2.js:102 bind @ jquery_migrate_3_3_2.js:705 init @ jquery_qtip_3_0_3.js:2732 OVERLAY @ jquery_qtip_3_0_3.js:2833 (anonymous) @ jquery_qtip_3_0_3.js:2835 (anonymous) @ jquery_qtip_3_0_3.js:25 (anonymous) @ jquery_qtip_3_0_3.js:28 (anonymous) @ jquery_qtip_3_0_3.js:3487
The messages are regarding e.g.
elem = self.elem = $('<div />', { id: 'qtip-overlay', html: '<div></div>', mousedown: function() { return FALSE; } }) .hide();
function delegate(selector, events, method) { $(document.body).delegate(selector, (events.split ? events : events.join('.'+NAMESPACE + ' ')) + '.'+NAMESPACE, function() { var api = QTIP.api[ $.attr(this, ATTR_ID) ]; api && !api.disabled && method.apply(api, arguments); } ); }
and
$(document.body).bind('focusin'+MODALSELECTOR, stealFocus); $(document).bind('keydown'+MODALSELECTOR, function(event) { elem.bind('click'+MODALSELECTOR, function(event) {
Now i wonder how to replace them correctly with the on
event. With bind
i suppose, i can easily replace it with .on
, but how to process with mousedown and delegate?
Any help would be appreciated :)
Related: jQuery .on('click') vs. .click() and .delegate('click')
Could solve it with the answer from freedomn-m :)
Solution:
elem = self.elem = $('<div />', {
id: 'qtip-overlay',
html: '<div></div>',
on: ('mousedown', function() { return FALSE; })
})
.hide();
function delegate(events, selector, method) {
$(document.body).on(events.split ? events : events.join('.'+NAMESPACE + ' ')) + '.'+NAMESPACE,
(selector,
function() {
var api = QTIP.api[ $.attr(this, ATTR_ID) ];
api && !api.disabled && method.apply(api, arguments);
}
);
}
$(document.body).on('focusin'+MODALSELECTOR, stealFocus);