3
votes

Le bouton sur le div précédemment masqué ne fonctionne pas

Mon programme a 2 divs avec des boutons, l'un est caché et l'autre est affiché. Lorsque je clique sur le bouton de div montré, il change ces 2 divs, se cache en premier et montre en second. Mais le bouton du second n'interagit pas avec les éléments des div frères comme des boutons du premier div, même si le code est exactement le même. (html)

$('.btn-add').on('click', function(){   
   ... do someting ...
  $('.first_two_guesses').hide();
  $('.word_guesses').show();
}

$('.btn-guess').on('click', function(){   
  ... do the same thing ...
}

(jquery)

<div class="first_two_guesses">
  <input type="text" class="guess" id='first_guess' placeholder="first guess">
  <input type="text" class="guess" id='second_guess' placeholder="second guess">      
  <button type='button' class="btn-add">Submit</button>
</div>
<div class='word_guesses' style='display: none;'>
  <input type='text' class='guess' id='word_or_letter' placeholder='letter or word'>
  <button type='button' class='btn-guess'>Submit</button>
</div>

javascript jquery html

1 commentaires

question pénurie

4 Réponses :

0
votes

Vous avez oublié de mettre des parenthèses de fin () ) dans votre code. Voir ci-dessous:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="first_two_guesses">
  <input type="text" class="guess" id='first_guess' placeholder="first guess">
  <input type="text" class="guess" id='second_guess' placeholder="second guess">      
  <button type='button' class="btn-add">Submit</button>
</div>
<div class='word_guesses' style='display: none;'>
  <input type='text' class='guess' id='word_or_letter' placeholder='letter or word'>
  <button type='button' class='btn-guess'>Submit</button>
</div>

$('.btn-add').on('click', function(){   
  $('.first_two_guesses').hide();
  $('.word_guesses').show();
});

$('.btn-guess').on('click', function(){   
  $('.first_two_guesses').show();
  $('.word_guesses').hide();
});

1 commentaires

Veuillez commenter la raison pour laquelle cette réponse est rejetée.

0
votes

Utilisez la fonction jQuery .toggle () pour changer la visibilité des éléments html.

$('.btn-add').on('click', function(){   
  $('.first_two_guesses').toggle();
  $('.word_guesses').toggle();
});

$('.btn-guess').on('click', function(){   
  $('.first_two_guesses').toggle();
  $('.word_guesses').toggle();
});

0 commentaires

0
votes

Vous pouvez désormais utiliser la méthode .on () . En attachant un événement délégué à un élément qui est visible dans le HTML lorsque jQuery est exécuté.

Donc, si a.someClass est masqué lorsque jQuery est exécuté, vous devez attacher un événement délégué au corps, afin qu'il s'exécute lorsque il y a un élément a.someClass visible dans le futur, par exemple:

$('body').on('click','input.a.someClass',function(){
  alert("test");
});

0 commentaires

0
votes

Voir Démo .

$('.btn-add').on('click', function(){   
   //... do someting ...
  $('.first_two_guesses').hide();
  $('.word_guesses').show();
});

$('.btn-guess').on('click', function(){   
 // ... do the same thing ...
   $('.first_two_guesses').show();
  $('.word_guesses').hide();
});

J'ai modifié votre question, ce que j'ai compris de votre problème est comme si vous vouliez basculer entre deux clics de bouton. Essayez d'utiliser le sélecteur d'identifiant avec vos éléments. Un identifiant peut être utilisé pour identifier un élément, alors qu'une classe peut être utilisée pour en identifier plusieurs

0 commentaires