Événement unique en jQuery

Lorsque nous étudiions le détachement des événements avec la méthode off, nous utilisions la construction suivante :

$('li').on('click', function() {
	$(this).append('!');
	$(this).off('click', func);
});

D'abord, nous attachions la fonction de gestionnaire avec on, puis nous la détachions avec off.

jQuery a une méthode pratique one, qui permet de lier un événement unique - il ne s'exécutera qu'une seule fois, puis se détachera automatiquement. Cette méthode prend comme premier paramètre le type d'événement, et comme second - la fonction à lier.

Nous allons examiner l'exemple suivant basé sur le code HTML ci-dessous :

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Le code CSS ressemble à ceci :

li {
	width: 100px;
	cursor: pointer;
}

Maintenant, nous lions un événement unique à chaque li :

$('li').one('click', function() {
	$(this).append('!');
});

Cliquez sur les éléments de la liste. Comme vous pouvez le voir, nous obtenons le même effet, grâce à la méthode one.

Attachez à tous les liens un événement - lors du survol du lien, son href est ajouté à la fin de son texte entre parenthèses. Après le premier survol du lien, détachez de celui-ci l'événement qui ajoute le href à la fin du texte.

Pour toutes les entrées (inputs), faites en sorte qu'elles affichent leur value lors d'un clic sur n'importe laquelle d'entre elles, mais seulement lors du premier clic. Un clic répété sur l'entrée ne doit pas provoquer de réaction.

Des paragraphes avec des nombres sont donnés. Lors d'un clic sur un paragraphe, le carré du nombre qu'il contient doit y apparaître, mais seulement au premier clic. Lors d'un double-clic sur le paragraphe, le nombre dans le paragraphe doit doubler, mais aussi seulement la première fois.

Des paragraphes sont donnés. Faites en sorte qu'au premier clic sur un paragraphe, un '!' lui soit ajouté à la fin, mais seulement au premier clic.