[Résolu] JQuery 2.1.3 >>> 2.2.3 : mise à jour des scripts

Bonjour,

Hier j'ai fais une MAJ de jQuery de la version 2.1.3 à la version 2.2.3... et j'ai bien galèré. Les problèmes se situaient essentiellement au niveau de l'utilisation des sélecteurs liés à la fonction .on(), pour la plupart des scripts... mais pas pour tous...

Exemple de sélection inutilisable avec la version 2.2.3 (et déjà depuis la version 2.2.0 en fait) :

$(document).on('click', '[id^="cmd-tab-"]', function() {

L'une de mes solution de remplacement, la suppression de la sélection du document courant quand c'est possible :

$('[id^="cmd-tab-"]').on('click', function() {

Ou pour certains autres de mes scripts, l'utilisation de .find() :

$(document).find('.cmd-print').on('click', function() {

Cependant certains scripts fonctionnent encore avec l'ancienne méthode :

$(document).on('focus', 'input, textarea', function() {

La feuille complète avec l'historique des modif's pour comprendre le contexte d'utilisation.

J'ai réglé mon problème donc, mais j'avoue que je n'y comprends pas grand chose. J'ai ouvert ce topic autant pour vous faire un partage de mes solutions que pour avoir un éventuel éclairage sur cette interrogation.

----------

PS : Un dernier point (qui ne me pose pas question) : les sélecteurs n'acceptent plus cette syntaxe :

'a[href*=#]:not([href=#])'

Il faut obligatoirement des guillemets sur la chaîne à vérifier :

'a[href*="#"]:not([href="#"])'

Modifié par Olivier C (01 May 2016 - 10:11)

MatthieuR a écrit :
Je ne vois pas cependant pourquoi ça aurait changé depuis la version 2.2.0.

Depuis les versions 2.1.x en fait...

MatthieuR a écrit :
Plus étonnant encore, ton dysfonctionnement sur le $(document).find('.cmd-print') avec un sélecteur simple. D'ailleurs je ne vois pas l'intérêt de faire comme ça alors que $('.cmd-print') suffit (et est en plus plus performant). Si tu procèdes comme ce dernier exemple, retrouves-tu ton comportement normal ?

C'est essentiellement pour faire en sorte qu'un élément appelé après le chargement de la page, via Ajax, puisse fonctionner tout de même.

Olivier C a écrit :
C'est essentiellement pour faire en sorte qu'un élément appelé après le chargement de la page, via Ajax, puisse fonctionner tout de même.

Oui, je suis au courant... mais rencontres-tu le même souci en écrivant $('.class').on(); au lieu de $(document).find('.class').on(); ?
Je pense encore que déléguer un événement à un élément en l'attachant à 'document' reste une mauvaise idée et peut-être le souci vient de là. D'autant que c'est inutile et gourmand en perf, l'idéal est de déléguer la propagation à un élément le plus proche de l'élément sur lequel on souhaite attacher l'événement (au max sur le body).
Quant à la version de mise à jour, tu parles d'une mise à jour de la 2.1.3 à la 2.2.3 et tu écris que en fait le changement de comportement remonte à la 2.1.0... Ton code ne fonctionnait déjà plus avant ta mise à jour ?
Modifié par MatthieuR (01 May 2016 - 15:13)

Ou alors $(container).find('.class').on(); où container est le proche ancêtre de .class resté dans le DOM lors de ta requête AJAX, ça fonctionne ou pas ?