[Résolu] Probleme avec la fonction html de JQuery

Bonjour tout le monde,

Je fais un petit jeu avec trois niveaux différents. Un click sur une petite image permet de changer de niveau :
facile > dur > diabolique.

Voici une partie du code :

<div id="choisir">
<p><img src="png/choisir.png" alt="" /> FACILE</p>
</div>

et JS :

var niveau = 0;
var niveau_txt = ['FACILE', 'DIFFICILE', 'DIABOLIQUE']; 

$('#choisir img').click(function() {
niveau = (niveau+1) % 3;
var autre_niveau = niveau_txt[niveau];
autre_niveau = '<p><img src="png/choisir.png" alt="" /> '+ autre_niveau + '</p>';
$('#choisir').html(autre_niveau);
})

Un premier clic m'affiche bien DIFFICILE au lieu de FACILE, mais les clics suivants ne changent rien, impossible de passer à DIABOLIQUE.
Merci de votre aide,

Bonjour,
l'erreur vient de ce que vous changer le contenu entier de la <div> parente, <p> et <img>donc l'image disparait, et donc on ne détecte pas de click.
Je suggère d'ajouter un <span> dans le HTML :

<div id="choisir">
     <p><img src="images/image.png" alt="image" /><span 
     id="affichage_niveau">FACILE</span></p>
</div>

et le JS devient :

$('#choisir img').click(function() {
	niveau = (niveau+1) % 3;
	var affichage_niveau = niveau_txt[niveau];
	$('#affichage_niveau').html(affichage_niveau);
})

que l'on peut simplifier :

$('#choisir img').click(function() {
	niveau = (niveau+1) % 3;
	$('#affichage_niveau').html(niveau_txt[niveau]);
})

Modifié par farang (18 Aug 2019 - 19:13)

Merci Faran, ça marche !
Je ne marque pas cependant le sujet comme résolu car je ne comprends pas pourquoi ça ne marchait pas avant étant donné que l'HTML injecté comportait bien la référence à l'image :

autre_niveau = '<p><img src="png/choisir.png" alt="" /> '+ autre_niveau + '</p>';
$('#choisir').html(autre_niveau);

???

Bonjour,

j'ai trouvé cet article qui explique le problème :

https://www.codewall.co.uk/jquery-on-click-function-not-working-after-appending-html/

Dans ton cas, tester l'événement onclick sur le parent permettrait le changement de niveau en cliquant sur toute la <div>, y compris l'intitulé du niveau, et non seulement l'image,
Pour ne garder que l'image active au clic, il faudrait changer légèrement la structure de ton code pour que image et texte n'ait pas le même parent, donc

à tester !

correction : le parent est <p> dan ton cas mais pas la <div>, d'ailleurs pourquoi ce <p>?
Modifié par farang (19 Aug 2019 - 09:10)

Merci Farang pour ton aide et pour le lien. C'est à la limite du bug dans Jquery quand même...
Je souhaitais avoir le clic sur l'image seulement parce qu'on ne doit pas pouvoir changer de niveau n'importe quand. En gros avant de commencer une partie seulement.
Lorsqu'on ne peut pas, l'image n'est plus visible. Le niveau actuel est par contre toujours affiché. Mais là, le lien devient inutile.
Quant au <p>.. euh.. bonne question... Je crois que mon niveau en programmation est l'explication !
Modifié par Titen (21 Aug 2019 - 12:17)