Priorité au plus gradé ?

Invité · 07/11/2012, 22h41

Bonsoir,
j'ai eu un "ptit souss'aïe" de priorité.
Voici le topo :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- Scripts jQuery : initialisation -->
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
	// ------------------------------------------------------------------
	// 1er script
	$('body').on('keyup', 'input', function() {
		var valeur = $(this).val();
		if(valeur!=''){	$(this).next('span').html('OK, input renseigné !');
		}
	});
	// ------------------------------------------------------------------
	// 2ème script
	$('#blocForm').on('keyup', 'input', function () {
		var valeur = $(this).val();
		if(valeur!=''){	$(this).next('span').html('Bonne valeur, ma foi !');
		}
	});
	// ------------------------------------------------------------------
});
</script>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<body>
<form id="blocForm">
	<input name="test" type="text" value="" />
	<span></span>
</form>
</body>

Quand on tape du texte dans l'input, il s'affiche (cela provient du 1er script) :

OK, input renseigné !

OR, le 2ème script "voudrait bien" afficher :

'Bonne valeur, ma foi !'

Le ~~problème~~ conflit vient du fait que le 1er script commence par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

	$('body').on(

alors que le 2ème script commence par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

	$('#blocForm').on(

Mon instinct me dit que 'body' est "plus gradé que" (= "de niveau supérieur à") '#blocForm', puisqu'il l'englobe.
D'ailleurs, en remplaçant $('#blocForm') par $('body') dans le 2ème, ça donne le résultat attendu. Ce qui ne me surprends pas.

MAIS (sachant que je souhaite garder 'keyup' dans les 2 scripts) :
=> est-il possible de donner la priorité au 2ème script (en conservant $('#blocForm') ) ??
=> ou d'exécuter le 2ème script APRES le 1er ??
Avec .delay() ?? (mais je n'ai pas réussi à le mettre où il faudrait)

Merci.

**danielhagnoul** · 07/11/2012, 23h36

Lors d'un événement keyup sur l'input, celui-ci remonte la hiérarchie du DOM. Il passe donc bien d'abord sur le formulaire avant d'atteindre le body.

Le problème n'est pas là, mais dans l'usage de html() au lieu de append(), car html() supprime le contenu existant avant d'insérer la nouvelle valeur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
	// ------------------------------------------------------------------
	// 1er script
	$('body').on( 'keyup', 'input', function(){
		var valeur = $(this).val();
		if(valeur!=''){	$(this).next('span').append(' OK, input renseigné !');
		}
	});
 
	// ------------------------------------------------------------------
	// 2ème script
	$('#blocForm').on( 'keyup', 'input', function(){
		var valeur = $( this ).val();
 
		if ( valeur!='' ){
			$( this ).next( 'span' ).html( 'Bonne valeur, ma foi !' );
		}
	});
	// ------------------------------------------------------------------

Invité · 07/11/2012, 23h44

Bonsoir Daniel,
je ne souhaite pas afficher les deux textes.
En fait, ceci n'est qu'un exemple.
Dans la réalité, j'ajoute des <span>, avec des class différentes, et d'autres choses...

J'aurais très bien pu mettre en exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

		$( this ).next( 'span' ).removeClass().addClass( 'class1' );

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

		$( this ).next( 'span' ).removeClass().addClass( 'class2' );

Je voudrais que le 2ème script "prenne le dessus" sur le 1er.
Possible, ou pas ?

Mais bon. J'ai l'impression qu'on ne peut pas grand chose contre la hiérarchie...
Si ??

**Bovino** · 08/11/2012, 08h16

Comme l'explique Daniel, lorsque tu utilises les événements délégués, tu poses le gestionnaire sur l'élément de référence. Dans ton cas, les événements concernent les balises <input>et sont posés respectivement sur l'objet body et #blocForm.
Lorsque l'événement est déclenché sur un input, celui-ci se propage vers le haut de l'arborescence du DOM. Lorsqu'il atteint la balise #blocForm, le gestionnaire vérifie si l'événement a été généré par le bon élément (ce qui est le cas) et la fonction ad hoc est lancée. L'événement continue à se propager, atteint le body qui déclenche la fonction idoine.
Donc les deux fonctions ont été exécutée mais tu n'as juste pas eu le temps de le voir.

Si tu veux éviter que l'événement remonte jusqu'au body, c'est-à-dire stopper sa propagation, tu peux utiliser la méthode stopPropagation().

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$('#blocForm').on( 'keyup', 'input', function(e){
    e.stopPropagation();
    // suite des instructions
});

event.stopPropagation()

Invité · 08/11/2012, 09h06

Envoyé par Bovino

Si tu veux éviter que l'événement remonte jusqu'au body, c'est-à-dire stopper sa propagation, tu peux utiliser la méthode stopPropagation().

Bovino, mon héros !

Priorité au plus gradé ?

jQuery

Vue hybride

Discussions similaires

Partager

Partager