Tagevent

[jQuery] Empêcher un événement de s’exécuter à de multiples reprises avec les méthodes On et Off (entre autres)

Source: Prevent jQuery events from firing multiple times

Le problème

Avec cette déclaration, la fonction cachedMenu à exécuter au clic sur un lien enfants de #cdDropdown dans le DOM était exécutée plusieurs fois (6 fois) à chacun de mes clics. La multiplication des exécutions était exponentielle car en m’amusant à cliquer environ 12 à 15 fois sur des liens, la console de debug a loggué pas moins de 11045 exécutions de ma fonction!!!

La solution

Avant d’activer un événement avec la méthode jQuery .on(), il faut tout simplement le désactiver avec la méthode .off().

[jQuery] Vérifier en cours de saisie en live si un input[type= »text »] contient du contenu avec l’événement Input et la méthode Val

Dans l’exemple qui suit, on procède à cette vérification pour désactiver une fonctionnalité de Collapse (Bootstrap) des champs de formulaires si du texte est saisi.

Si un seul champ à vérifier:

Si le champ qui a le focus n’est pas vide, on agit sur #triggerBillingAddressExtraInfo en ajoutant un style inline pointer-events: none; (qui désactive la possibilité de cliquer sur l’élément).

Si plusieurs champs à vérifier:

Sources: jQuery check if any text input has value et Detect changed input text box.

Si le champ qui a le focus n’est pas vide, on agit sur #triggerBillingAddressExtraInfo en ajoutant un style inline pointer-events: none; (qui désactive la possibilité de cliquer sur l’élément).

On ajoute la condition: si tous les champs au sein de #collapseBillingAddressExtraInfo sont vides, on retire le style inline pointer-events: none;.

Mieux, avec deux fonctions

[jQuery] Surveiller les changements sur un élément du DOM avec la méthode Bind et l’événement DOMSubtreeModified

Edit 11/02/2020: DOMSubtreeModified est désormais déprécié au profit de MutationObserver.

Mes propres expériences avec les MutationObserver:


Pour surveiller les changements sur un élément du DOM avec jQuery, on va souvent vous renvoyer vers l’utilisation de l’événement .on('change', ...) ou des MutationObserver, mais il y a plus simple avec l’événement .bind('DOMSubtreeModified', ...).

Source: jQuery watch for domElement changes?. Demo JSfiddle.net – Listen DOM Changes using jQuery.

Edit 12/07/2018: j’ai remplacé la méthode .bind() aujourd’hui dépréciée par .on().

[jQuery] Binder l’événement Click sur tous les éléments du DOM sauf un ou plusieurs éléments

Source: jQuery bind click *ANYTHING* but *ELEMENT*

Annuler les effets d’event.stopPropagation()

Source: How to undo event.stopPropagation in jQuery?

Faire en sorte que le $(document).on(‘click’) n’agisse qu’une fois

Utiliser la méthode .off().

[jQuery] Bloquer, jusqu’à sa validation, l’événement Submit dans un formulaire contenant plusieurs boutons

Un formulaire est susceptible de contenir plusieurs boutons, par exemple dans le cas d’un formulaire sur plusieurs étapes avec un bouton prev, un bouton next pour naviguer d’une étape à l’autre et un bouton submit pour soumettre le formulaire.

Si on passe par une validation des champs étape par étape (les champs doivent être correctement renseignés sur une étape donnée avant de pouvoir passer à la suivante) et qu’on utilise (par exemple), le plug-in Abide de Foundation 6 for sites, la présence de l’attribut type="submit"> est obligatoire sur les boutons prev et next pour valider les champs saisis à l’étape en cours avant de pouvoir accéder à la suivante.

Problème: cette présence obligatoire de l’attribut type="submit"> sur les boutons prev et next a pour fâcheux résultat de soumettre le formulaire au clic sur ces derniers.

Solution: intercepter l’événement submit avec la méthode .bind().

Ce code aura pour effet d’annuler la soumission du formulaire sur tous les boutons de celui-ci. Ce n’est pas tout-à-fait ce que l’on souhaite puisqu’arrivé à la fin de notre formulaire, il faut pouvoir soumettre les données.

Pour ce faire, on va commencer par masquer le vrai bouton de soumission :

On va ensuite créer un faux bouton à l’aide d’un élément a (qui ne pourra rien soumettre) :

Puis, au moment ou on souhaite laisser la possibilité à l’utilisateur de soumettre, on lance au clic sur notre faux bouton un .unbind() de l’événement submit et et un trigger-click sur le vrai bouton de soumission (qui reste toujours masqué) :

L’intérêt de cette solution réside dans le fait qu’on continue d’empêcher les boutons prev et next d’envoyer le formulaire, ce qui se produirait à la dernière étape si on unbindait l’événement submit sur l’ensemble des boutons et que l’utilisateur décidait, au lieu de soumettre, de repasser à l’étape précédente.

[jQuery] Empêcher un événement (un click) de s’exécuter à plusieurs reprises avec les méthodes On et Off

Source : Prevent jQuery events from firing multiple times, ou ma demo qui fonctionne sur jsFiddle.

Problème : ma demo qui ne fonctionne pas sur jsFiddle. J’attribue un événement Click sur un élément (dans ma demo, le lien « Lorem ipsum » par exemple). Lorsque je clique une première fois sur cet élément, l’événement Click se produit une fois. Lorsque je modifie la largeur de la fenêtre (passage à une autre vue) et que je clique une seconde fois sur ce même élément, l’événement Click se produit 2 fois, et ainsi de suite …

Solution :

© 2020 devfrontend.info

Theme by Anders NorénUp ↑