Priorité au plus gradé ?

Version imprimable

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21  <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:

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) :

Citation:

OK, input renseigné !

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

Citation:

'Bonne valeur, ma foi !'

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

Code:

$('body').on(

alors que le 2ème script commence par :

Code:

$('#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.

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:

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 !' ); } }); // ------------------------------------------------------------------

07/11/2012, 23h44
Invité

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:

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

et

Code:

$( 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 ??
08/11/2012, 08h16
Bovino
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:

1 2 3 4 $('#blocForm').on( 'keyup', 'input', function(e){ e.stopPropagation(); // suite des instructions });
:fleche: event.stopPropagation()
08/11/2012, 09h06
Invité

Citation:

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().

:hola: Bovino, mon héros ! :roi: