Compatibility issues between jquery libraries

Question

I am using some jquery in my code:

$('li.dropdown-toggle').on('hover', function () {
    $(this).find(".submenu").slideToggle(400);
});

It works fine when I link to 1.7.2 jquery library (https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js).

Unfortunately the website needs 3.1.0 library (https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js).

How can I modify the code without swapping libraries to make sure it works fine?

just in case, here is the fiddle - it works ok in this fiddle, but when I change the library to 3+ it stops working

Thanks

score 3 · Accepted Answer · answered Apr 20 '19 at 17:15

3

http://api.jquery.com/on/#additional-notes

Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave.

Simply replace .on('hover', function() { ... }) with .on('mouseenter mouseleave', function() {...}).

answered Apr 20 '19 at 17:15

Tyler Roper

21,445
6
33
56

@cale_b why?? any reason for that? – Adam Najlepszy Apr 20 '19 at 17:20
@AdamNajlepszy In general, I agree with cale_b (although maybe not in this specific instance). We don't want to clutter up StackOverflow with multiples of the same question, and by answering clear duplicates, we encourage more of them. – Tyler Roper Apr 20 '19 at 17:22
@TylerRoper, thanks. Will keep in mind. Thanks – Adam Najlepszy Apr 20 '19 at 17:24

Compatibility issues between jquery libraries

1 Answers1