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 :)
