Le problème principal est que vous ajoutez votre écouteur d’événement de click “caractère” à chaque

avec le code:

 $('.charContainer').on('click', function(){... 

Ensuite, une fois que vous avez déplacé les div charContainer aux enemies les auditeurs de l’événement étaient toujours sur les divs charContainer . Ainsi, lorsque vous avez cliqué sur l’un d’entre eux, il a été déplacé vers your div. Vous pouvez résoudre ce problème en supprimant l’écouteur à l’aide de .off('click') sur chaque div ou en utilisant la délégation d’événements. Dans le code ci-dessous, j’ai choisi la délégation d’événements.

En outre, vous tentiez d’append des écouteurs à tous les .foes immédiatement après avoir ajouté les autres écouteurs, mais avant que l’utilisateur ne clique sur quoi que ce soit. A l’époque le code:

 $('.foes').on('click', function() {... 

a été exécuté, rien dans votre document ne correspond au sélecteur '.foes' . Ainsi, aucun auditeur d’événement n’a été ajouté.

Pour résoudre cela, j’ai changé:

Dans votre HTML:

à

Vous utilisez des characters pour identifier de manière unique cette div spécifique et non pour grouper un ou plusieurs éléments. Ainsi, pour la façon dont vous l’utilisez, les characters sont plus appropriés comme id que comme class .

Dans votre code JavaScript, les modifications principales consistent à modifier vos écouteurs d’événements pour qu’ils se trouvent sur les éléments div du conteneur, mais à n’exécuter votre gestionnaire que lorsque l’élément correspond au sélecteur '.charContainer' . Par exemple,

 $('#characters').on('click', '.charContainer', function(e) {... 

ajoute un gestionnaire d’événements click à tous les éléments qui correspondent au sélecteur '#characters' . C’est le div qui contient les personnages que vous sélectionnez pour your personnage. Le deuxième argument de .on() indique à jQuery de n’exécuter votre gestionnaire que lorsque la cible de l’événement ( e.target ) correspond au sélecteur .charContainer .

Votre autre gestionnaire d’événement, pour les foes , j’ai changé en:

 $('#enemies').on('click', '.foes', function(e) { 

Comme avec l’écouteur de characters , ceci utilise la délégation d’événements pour avoir cet écouteur d’événements sur votre

, mais n’exécute votre gestionnaire que lorsque la cible de l’événement correspond au sélecteur '.foes' .

J’ai également changé votre utilisation de this en e.target dans vos gestionnaires d’événements lorsque vous l’utilisiez pour faire référence à la cible de l’événement. Alors que votre utilisation était correcte, lorsque vous utilisez des fonctions dans un gestionnaire d’événements qui changent la valeur de this ( .each() , here), l’utilisation de la cible d’événement explicite fournit un code plus .each() .

 $(document).ready(function() { $('#characters').on('click', '.charContainer', function(e) { $('#your').append(e.target); $('#characters>.charContainer').each(function() { $(this).removeClass('charContainer').addClass('foes'); $('#enemies').append($(this)); }) $('#characters').remove(); }) $('#enemies').on('click', '.foes', function(e) { $('#opponent').append(e.target); $(e.target).addClass('defender'); $('#enemies').remove(); //Added this to match action on picking character. }) }); 

  
  
 
  
 
 
 
  
 
 
 
  
 
 
 
  
 
 
 
 
Your Character
  
 
 
Enemies
  
 
 
Fight Section
  
Attack
  
 
 
Opponent
   

Appeler .off("click")

 $(".characters>.charContainer").off("click") 

dans .characters>.charContainer click gestionnaire pour détacher les éléments click de .charContainer .

Utilisez la délégation d’événements, .one() à #enemies , si un .foes élément .foes doit être #opponenent élément #opponenent

 $('#enemies').one('click', ".foes", function() {}) 

lors de l’attachement de click à l’élément #enemies pour que le gestionnaire soit appelé lorsque l’ className clique sur des éléments ayant ajouté dynamicment des foes className

 $(document).ready(function() { $('.charContainer').on('click', function(e) { $("#your").append(this); $('.characters>.charContainer') .off("click") .each(function() { $(this).removeClass('charContainer') .addClass('foes'); $('#enemies').append(this); }) $('.characters').remove(); }) $('#enemies').one('click', ".foes", function() { $('#opponent').append($(this)); // $(this).appendTo('#opponent'); $(this).addClass('defender'); }) }); 

  
 
 
  
 
 
 
  
 
 
 
  
 
 
 
  
 
 
 
 
Your Character
  
 
 
Enemies
  
 
 
Fight Section
  
Attack
  
 
 
Opponent
   

Je ne dis pas que c’est le moyen le plus efficace de produire le résultat souhaité, mais le nombre de modifications nécessaires à votre code pour obtenir le résultat souhaité est le suivant:

• Supprimez les gestionnaires de clics initiaux après avoir cliqué sur la première div Pour ce faire, utilisez $('.charContainer').off('click') une fois qu’un de ces divs est cliqué.

• Déplacez votre $(.foes).on('click', ... dans le gestionnaire de clics original.

 $(document).ready(function() { $('.charContainer').on('click', function() { $('.charContainer').off('click'); // *** add this line $('#your').append($(this)); $('.characters>.charContainer').each(function() { $(this).removeClass('charContainer').addClass('foes'); $('#enemies').append($(this)); }); $('.characters').remove(); $('.foes').on('click', function() { // *** move this into the click handler $('#opponent').append($(this)); $(this).addClass('defender'); }); }); }); 

  
 
 1 
 
 2 
 
 3 
 
 4 
 
 
 
Your Character
 
 
 
Enemies
 
 
 
Opponent