Médiaforma

All posts tagged on

jQuery est souvent utilisé pour ajouter des éléments dans une page Web. Si des événements sont attachés aux éléments de même type déjà existants, il est possible d’attacher les mêmes événements aux nouveaux éléments. En utilisant la délégation événementielle, vous ne serez pas obligé de définir une méthode événementielle pour chacun des nouveaux éléments.

Pour mettre en place une délégation événementielle, vous devez utiliser la méthode on() en lui transmettant trois arguments :

$('#del').on('ev', 'sel', function () {
  //Une ou plusieurs instructions
});

 

Où :

  • del est l’élément dont on souhaite cloner le ou les gestionnaires d’événements ;
  • ev est le nom de l’événement concerné ;
  • sel est un sélecteur qui agit comme un filtre ;
  • function() est la fonction à exécuter lorsque l’événement ev est détecté.

A titre d’exemple, nous allons définir un code permettant de dupliquer un élément div en héritant de sa gestion événementielle.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Délégation événementielle</title>
    <style>
      div {
        background:#cfe;
        font-style: italic;
        cursor:pointer;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <script src="jquery.js"></script>
    <div id="master">
      <div>Cliquez pour insérer un autre &ltdiv&gt</div>
    </div>
    <script>
      $('#master').on('click', 'div', function(){
        $(this).after('<div>Cet élément a les mêmes caractéristiques que son parent</div>');
      });
    </script>
  </body>
</html>

 

Le corps du document contient deux éléments div imbriqués :

<div id="master">
  <div>Cliquez pour insérer un autre &ltdiv&gt</div>
</div>

 

Au clic sur le div parent :

$('#master').on('click', 'div', function(){

 

Un élément div est inséré après le div parent. Cet élément div a les mêmes caractéristiques que son parent :

$(this).after('<div>Cet élément a les mêmes caractéristiques que son parent</div>');

 

Il est donc possible de cliquer dessus pour insérer un nouvel élément div.

Voici le code généré après deux clics sur un élément div :


Exercice sur les cases à cocher

Pour savoir si une case est cochée, vous utiliserez la méthode is(‘:checked’).

Saisissez le code suivant dans NotePad++ et sauvegardez-le sous le nom cases-radio-listes2.htm.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Formulaire-Cases à cocher, boutons radio et listes déroulantes</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <h2>Cases à cocher, boutons radio et listes déroulantes</h2>
    Vos compétences :
    <input type="checkbox" id="html5" value="1"> HTML5
    <input type="checkbox" id="css3" value="2"> CSS3
    <input type="checkbox" id="jQuery" value="3"> jQuery<br>
    Compétence : Oui <input type="radio" name="competence" id="oui" value="o"> Non <input type="radio" name="competence" id="non" value="n"><br>
    Niveau<select id="niveau">
      <option value="debutant">Débutant</option>
      <option value="moyen">Moyen</option>
      <option value="confirme">Confirmé</option>
    </select><br><br>
    <textarea id="status" style="width:400px; height: 300px;"></textarea>
    <script>
      $(function() {
        // Insérer le code jQuery ici
      });
    </script>
  </body>
</html>

 

Définissez un gestionnaire d’événements qui détecte les modifications sur les cases à cocher et qui les affiche dans l’élément textarea.

 

Solution

$('input[type="checkbox"]').on('change',function(){
  if ($(this).is(':checked'))
    $('#status').append($(this).attr('id') + ' cochée\n');
  else
    $('#status').append($(this).attr('id') + ' décochée\n');
});

Pour cocher/décocher une case à cocher, agissez sur son attribut checked : true=coché, false=décoché.

Pour sélectionner un bouton radio, agissez sur sa valeur avec la méthode val().

Enfin, pour sélectionner une valeur dans une liste déroulante, agissez sur sa valeur en appliquant la méthode val() à l’élément select correspondant.

 

Exercice sur la modification de cases à cocher, boutons radio et listes déroulantes

Tapez le code suivant dans NotePad++ et sauvegardez-le sous le nom cases-radio-listes.htm. Ajoutez les instructions jQuery nécessaires pour donner vie aux trois boutons.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Formulaire-Cases à cocher, boutons radio et listes déroulantes</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <h2>Cases à cocher, boutons radio et listes déroulantes</h2>
    Vos compétences :
    <input type="checkbox" id="html5" value="1"> HTML5
    <input type="checkbox" id="css3" value="2"> CSS3
    <input type="checkbox" id="jQuery" value="3"> jQuery<br>
    Compétence : Oui <input type="radio" name="competence" id="oui" value="o"> Non <input type="radio" name="competence" id="non" value="n"><br>
    Niveau<select id="niveau">
      <option value="debutant">Débutant</option>
      <option value="moyen">Moyen</option>
      <option value="confirme">Confirmé</option>
    </select><br><br>
    <button id="cocher-html5">Cocher la case HTML5</button>
    <button id="selectionner-oui">Sélectionner le bouton Oui</button>
    <button id="choisir-confirme">Choisir Confirmé dans la liste</button><br>

    <script>
      $(function() {
        // Insérez le code jQuery ici
      });
    </script>
  </body>
</html>

Solution

$(function() {
  $('#cocher-html5').on('click',function(){
    $('#html5').attr('checked', true);
  });
  $('#selectionner-oui').on('click',function(){
    $('#oui').val(['o']);
  });
  $('#choisir-confirme').on('click',function(){
    $('#niveau').val('confirme');
  });
});