Délégation en jQuery

Si vous avez étudié JavaScript, vous avez déjà été confronté au thème de la délégation d'événements, grâce à laquelle on peut, par exemple, se débarrasser des problèmes lors de l'attribution d'événements pour de nouveaux éléments. Voyons à quoi cela ressemblera pour jQuery.

Prenons le code HTML suivant :

html<ul>
  <li>texte</li>
  <li>texte</li>
  <li>texte</li>
</ul>

Le CSS pour celui-ci ressemble à ceci :

cssli {
  width: 100px;
  cursor: pointer;
}

Maintenant, avec la méthode on, attachons la méthode click non pas à l'élément de liste li, comme nous l'avons fait dans les leçons précédentes, mais à la liste elle-même ul. Nous passerons également un deuxième paramètre (optionnel) 'li' comme sélecteur de descendants. Voyons ce que cela donne :

javascript$('ul').on('click', 'li', function() {
  $(this).append('!');
});

Задание 1

Soit un ul, contenant plusieurs li. Sous le ul, faites un bouton, upon cliquant sur lequel un nouveau li sera ajouté à la fin du ul avec le texte 'point'. Faites en sorte que lorsqu'on clique sur chaque li, un '!' soit ajouté à sa fin. Cela doit fonctionner également pour les li nouvellement ajoutés. Résolvez la tâche en utilisant la délégation (c'est-à-dire que l'événement doit être attaché au ul).

Задание 2

Soit un tableau d'utilisateurs avec deux colonnes : prénom et nom. Sous le tableau, faites un formulaire grâce auquel il sera possible d'ajouter un nouvel utilisateur dans le tableau. Faites en sorte qu'un clic sur n'importe quelle cellule fasse apparaître un prompt, grâce auquel on peut modifier le texte de la cellule. Résolvez la tâche en utilisant la délégation (c'est-à-dire que l'événement doit être attaché au table).