J'ai fait une petite classe en JS et je voudrais quand je dessine id avec la méthode "draw", ajouter un événement comme onclick.

Il y a ma classe JS:

 function Variable(index, value, name, typeVar, x ,y ,position, elseTree) {
        this.type = 0;
        this.index = index;
        this.value = value;
        this.name = name;
        this.typeVar = typeVar;
        this.x = x;
        this.y = y;
        this.position = position;
        this.elseTree = elseTree;

        this.draw = function() {
            $(document.createElement("div")).attr("id", "var"+index).addClass("w3-red item").html('<b>'+name+':'+value+'</b>').css({"position" : "absolute", "top" : y, "left" : x}).appendTo($("#content"));
            variables.push(this);
        }
    }

J'ai essayé mais cela ne fonctionne pas (l'élément est dessiné mais l'événement ne fonctionne pas):

function Variable(index, value, name, typeVar, x ,y ,position, elseTree) {
    this.type = 0;
    this.index = index;
    this.value = value;
    this.name = name;
    this.typeVar = typeVar;
    this.x = x;
    this.y = y;
    this.position = position;
    this.elseTree = elseTree;

    this.draw = function() {
        $(document.createElement("div")).attr("id", "var"+index).addClass("w3-red item").html('<b>'+name+':'+value+'</b>').css({"position" : "absolute", "top" : y, "left" : x}).appendTo($("#content"));
        variables.push(this);
    }

    $("#var"+index).click(function() {
        alert(name);
    });
}
-1
Kpone 7 mars 2016 à 20:09

3 réponses

Meilleure réponse

Vous n'avez pas écrit le code appelant Variable() mais vous appelez probablement draw() pour créer l'élément après l'écouteur de clics. Vous devez utiliser le gestionnaire d'événements "on" pour écouter le clic sur votre élément créé dynamiquement, ou mettre le écouteur dans votre fonction draw() comme ci-dessous:

this.draw = function() {
    $(document.createElement("div")).attr("id", "var"+index).addClass("w3-red item").html('<b>'+name+':'+value+'</b>').css({"position" : "absolute", "top" : y, "left" : x}).appendTo($("#content"));
    variables.push(this);

     $("#var"+index).click(function() {
         alert(name);
     });
}

Conseil supplémentaire: lorsque vous utilisez jQuery, vous pouvez créer votre élément comme celui-ci au lieu d'utiliser vanillaJS: $('<div />')...appendTo()

Edit: Encore mieux, sans utiliser de concaténation pour trouver votre élément selon son id:

this.draw = function() {
    $('<div />')
       .attr("id", "var"+index)
       .addClass("w3-red-item")
       .html('<b>'+name+':'+value+'</b>')
       .css({"position" : "absolute", "top" : y, "left" : x})
       .click(myFunction)  // Put here the name of the function doing the job you expect instead of 'mFunction'
       .appendTo($("#content"));
    variables.push(this);

}
0
bviale 7 mars 2016 à 17:27

Vous ajoutez un élément dynamiquement, vous avez donc besoin d'une délégation d'événement pour que cela fonctionne.

$("#content").on('click',"#var"+index,function() {
        alert(name);
    });

OU

$(document).on('click',"#var"+index,function() {
        alert(name);
    });
0
DinoMyte 7 mars 2016 à 17:44

Je crois que ce que vous voulez est quelque chose comme ça, juste après avoir créé l'élément:

this.draw = function() {
    $(document.createElement("div")).attr("id", "var"+index).addClass("w3-red item").html('<b>'+name+':'+value+'</b>').css({"position" : "absolute", "top" : y, "left" : x}).appendTo($("#content"));
    $("#var"+index).on( "click", function(){ myFunction(); });
    variables.push(this);
}
0
Giovanni Perillo 7 mars 2016 à 17:15