How to recup the .data of an element that has been clicked ? (javascript, not working atm)

Question

i'm currently working on an online project which is a Tarot game (card game) in single page application. And the thing is, in order to play, the player needs to click on a card, which is here in my case an img, and it should execute a fonction getting thedatas that I put in earlier when I dynamically generated the cards.

However, when I try to click, it calls the function but I get a console.log() undefined instead of the awaited data.

Here is my code generating a card :

 let ajouterImageCarte = function (carte, destination) { let img = $('<img />'); $(destination).append( img.attr("src", carte.url) .attr("class", "imageCarte") .data("valeur", carte.valeur) .data("couleur", carte.couleur) .data("nom", carte.nom) .click(clickImgage) ); }; 

And here is the function called after a click :

 let clickImgage = function () { $.ajax({ url: '/php/json/getTourEtatJeu.php' }) .done(function (dataEtat) { if (dataEtat.isMonTour && "chien" === dataEtat.etatPartie) { console.log("yes"); if (1<2) { let nom = $(this).data("nom"); console.log(nom); let carte = new Carte(nom); chien.push(carte); $(this).fadeOut(function () { let img = $('<img />'); $('#plateau').append( img.attr("src", carte.url) .attr("class", "imageCarte") .data("valeur", carte.valeur) .data("couleur", carte.couleur) .data("nom", carte.nom) .click(clickImgage) ); }) } else { console.log("no"); } } else if (dataEtat.isMonTour && "jeuEnCours" === dataEtat.etatPartie) { } }) .fail(function () { alert("Problème survenu lors du clic sur une carte !!"); }); return false; }; 

The important part of the function is at the beginning, after the ajax call, where I try to console.log(nom), which is let nom = $(this).data("nom");.

I've already tried some stuff and looked in stack overflow questions and other websites but I didn't manage to find an answer for this strange problem. Besides, I could really use some help right now because I need to finish this project today and this point is the only point that doesnt work.

Thank you in advance :)

Answer 1

there are some not understandable for me issues with retrieving by .data() method with jquery

1. in most of cases just .data() works fine
2. you can try .attr("data-valeur") method with 'data' option
3. you can also use directly .dataset property from an html element

Answer 2

In your callback, this doesn't refer to the clicked image as you expect. See the answers here : $(this) inside of AJAX success not working