0

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')

theraven
  • 21
  • 7
  • 1
    `.delegate(selector, event, func)` -> `.on(event, selector, func)`. `.bind(event, func)` -> `.on(event, func)` `.mousedown` (not deprecated according to [jquery](https://api.jquery.com/mousedown/)) -> `.on("mousedown", func)` – freedomn-m Jul 21 '22 at 10:34
  • Hey @freedomn-m, thanks a lot! It was working with almost all of them, i'm right now just not sure about the mousedown as it looks like this: `mousedown: function() { return FALSE; }` Is the following part correct?: `on("mousedown", function() { return FALSE; })` – theraven Jul 21 '22 at 11:07
  • So far `on: ('mousedown', function() { return FALSE; })` is not giving any error message :) – theraven Jul 21 '22 at 11:27

1 Answers1

1

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);
theraven
  • 21
  • 7