Gestion des événements sur les objets JavaScript générés dynamiquement

Question

J'ai un objet que j'ai créé en JavaScript. Disons qu'il ressemble à ceci:

function MyObject() { 
    this.secretIdea = "My Secret Idea!"; 
}; 

MyObject.prototype.load = function() { 
    this.MyButton = $(document.createElement("a")); 
    this.MyButton.addClass("CoolButtonClass"); 
    this.MyButton.click = MyButton.onButtonClick; 
    someRandomHtmlObject.append(this.MyButton); 
}; 

MyObject.prototype.onButtonClick = function(e) { 
    alert(this.secretIdea); 
}; 

Comme vous pouvez le voir, j'ai une configuration d'objet en JavaScript et, quand il est chargé, il crée une balise d'ancrage. Cette balise d'ancrage en tant qu'image de fond en CSS (donc ce n'est pas vide).

Maintenant, je comprends que l'instruction 'this', quand le bouton serait effectivement cliqué, tomberait dans la portée de l'élément MyButton plutôt que dans l'objet que j'ai créé.

J'ai essayé d'utiliser call(), try() et bind() et je n'arrive pas à faire fonctionner ça. J'en ai besoin pour que, lorsqu'on clique sur le bouton, il revienne à la portée de l'objet et non à la portée de l'élément html.

Qu'est-ce qui me manque ici?

Answer 1

La valeur this dans le gestionnaire d'événements click fait référence à l'élément DOM, pas à l'instance d'objet de votre constructeur.

Vous devez persister cette valeur, aussi vous référer à MyButton.onButtonClick Je pense que vous voulez consulter la méthode onButtonClick déclaré sur MyObject.prototype:

MyObject.prototype.load = function() { 
    var instance = this; 
    //.. 
    this.MyButton.click(function (e) { // <-- looks like you are using jQuery 
     // here `this` refers to `MyButton` 
     instance.onButtonClick(e); 
    }); 
    //... 
};