Étiquette : $(this)

[Magento 2] Gestion des événements et du passage de l’objet This dans les widgets jQuery UI avec les méthodes proxy ou bind

Ce post sur stack overflow qui explique très bien le problème et donne des solutions: How to handle events in jQuery UI widgets.

Cet autre post sur stack overflow qui explique comment solutionner le problème à l’aide de la méthode .bind(): Pass correct « this » context to setTimeout callback?.

Exemple de widget complet

$(document).on('click', <DOM element>, <JS function>.bind(this)); et setTimeout(function () { ... }.bind(this), 250);

L’objet this passé dans l’événement .on('click', ...) par l’intermédiaire de la méthode .bind() est bien celui du widget et pas la cible du click (récupérable au besoin dans la fonction _handleNewOptionSelection via un e.target.

Autres manières d’utiliser des événements:

ATTENTION: dans l’exemple ci-dessus, la présence du paramètre true dans this.element.on('focus', this.setActiveState.bind(this, true)); peut dans certains cas faire que la fonction cible ne soit pas exécutée!
A ce moment, essayer ceci:

Cas d’utilisation de .bind() avec setInterval():

Cas avec l’utilisation de matchMedia/mediaCheck

Notez la présence de .bind(this) après chaque fonction (entry, exit).

Utiliser la méthode .bindAll de Underscore

La méthode dans le code source du framework Underscore (version 1.8.2):

Dans les faits:

[jQuery] Eviter la duplication d’éléments du DOM lorsqu’on utilise .each() en exploitant correctement l’objet $(this)

Dans mon exemple, j’ai trois containers <div class="payment-method" /> qui sont présents dans le DOM. Chacun de ces containers possède son propre bouton. Je cherche à ajouter un seul nouveau bouton dans chaque container qui n’est pas tout-à-fait un clone de celui qui existe déjà, mais qui en reprend le code HTML enfant.

Problème: avec le code ci-dessous, les trois boutons que j’ajoute sont créés une fois dans chaque container. En d’autres termes, je me retrouve avec quatre boutons (au lieu de deux) dans chaque container.

Solution: le souci provient d’une mauvaise utilisation de $(this) en combinaison de .each(). Ci-dessous le code qui me donne le résultat attendu:

[jQuery] Passer $(this) dans une fonction à l’aide de thisObj