Je veux obtenir la valeur de data-id et data-test en utilisant jQuery à partir d'un élément span créé dynamiquement

Question

Je n'obtiens pas la valeur data-id de l'élément span lors du clic.

function getvalue() {
  alert($(this).data('id'));
  alert($(this).attr('data-id'));
  alert($(this).data('test'));
}

cliquez ici

pour obtenir les données de data-id et data-test lors du clic sur l'élément span. Une autre chose que j'ai créée dynamiquement donc je ne peux pas faire un clic en utilisant #id. S'il vous plaît aidez-moi.

Answer 1

Le problème est que vous utilisez un attribut d'événement on* donc this dans la fonction est la window, pas l'élément qui a déclenché l'événement. Vous passez l'élément en tant qu'argument à la fonction, donc vous devez simplement définir l'argument dans la signature de la fonction, comme ceci :

function getvalue(el) {
  console.log($(el).data('id'));
  console.log($(el).attr('data-id'));
  console.log($(el).data('test'));
}

cliquez ici

Cela étant dit, vous ne devriez pas utiliser d'attributs d'événement car ils sont très dépassés et considérés comme une mauvaise pratique par conséquent. Utilisez plutôt des gestionnaires d'événements non intrusifs.

Votre question indique également que les éléments sont ajoutés dynamiquement, vous devrez donc utiliser un gestionnaire d'événements délégué dans ce cas. Vous pouvez donc utiliser on() :

$(function() {
  $(document).on('click', '.myclass', function() {
    console.log($(this).data('id'));
    console.log($(this).data('test'));
  });
});

cliquez ici

De plus, notez l'utilisation de console.log() pour le débogage au lieu de alert(). Ce dernier devrait être évité car il force les types de données, ce qui peut masquer des problèmes, et il est également modal, ce qui est ennuyeux.