JS onclick déclenche un mauvais objet

ce que j'essaie de faire ici est d'associer un objet DOM à une instance d'un objet JS, ce qui fournira plus tard des méthodes sensitives;) À ce stade, je veux juste gérer mon JS objet l'événement click, tout en gardant ses références intactes.JS onclick déclenche un mauvais objet

<?xml version="1.0" encoding="ISO-8859-1" ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
<title>Insert title here</title> 
<script type="text/javascript"> 
// my object, which will hold a reference to a single DOM object 
obj = function(domobj) { 
this.o = domobj; 
my = this; 
var ref = my.click; 
this.o.onclick = ref; 

} 
// my objects click function 
obj.prototype.click = function() { 
    alert(my.o.innerHTML); 
} 

// create objects with references 
$(document).ready(function() { 
o1 = new obj(document.getElementById('b1')); 
o2 = new obj(document.getElementById('b2')); 
}); 
</script> 

</head> 
<body> 
<button id="b1">button 1</button> 
<button id="b2">button 2</button> 
</body> 
</html>

Résultat attendu: en cliquant sur le bouton 1, devrait être alertés le texte "bouton 1".

Résultat actuel: Lorsque vous cliquez sur le bouton 1, le texte "bouton 2" est averti. Ce que j'ai découvert jusqu'à présent est que la mauvaise instance de obj est déclenchée par l'événement click, même si o1 et o2 maintiennent des références correctes à leur objet DOM correspondant.

Des idées pour résoudre ce problème?

Merci pour votre aide!

Meilleures salutations, Clemens

Source

2010-03-26 blacktarmac

Lorsque vous affectez une fonction à une propriété d'élément DOM comme onclick, cette dans cette fonction (lorsqu'elle est appelée) va être l'élément DOM. Vous pouvez changer cela, cependant, en utilisant apply et/ou un peu de fermeture.

Check this out (il est encore un peu comme votre exemple, mais voir les commentaires pour ce qui se passe maintenant):

<script type="text/javascript"> 
// Obj with properties of its own, including a cool DOM object 
function Obj(domobj, name) { 
    this.name = (typeof name==='undefined') ? 'Clemens Prerovsky' : name; 
    this.o = domobj; 
    // Closure time! Preserve this 'this', using 'that' 
    var that = this; 
    domobj.onclick = function() {return that.clickHandler();}; 
} 
// Handler of clicks 
Obj.prototype.clickHandler = function() { 
    alert(this.o.innerHTML+', name:'+this.name); 
} 

// Create objects with references 
$(document).ready(function() { 
    var o1 = new Obj(document.getElementById('b1')); 
    var o2 = new Obj(document.getElementById('b2'), 'npup'); 
}); 
</script>

Je vous invite à ne pas créer des variables globales par erreur. Prenez soin de déclarer vos variables afin de ne pas avoir de mauvaises surprises. Ce qui restait de cet exemple étaient les objets o1 et o2.

De mauvaises surprises se cachent toujours lors de la création de références circulaires, et vous courez le risque de fuite de mémoire si elles ne sont pas manipulées proprement. Les "objets personnalisés" sont-ils vraiment nécessaires de cette manière?

HTH.

Source

2010-03-27 00:02:57 npup

Salut les gars - merci pour votre aide. Évidemment je n'ai pas compris comment utiliser correctement les fermetures, malgré la création accidentelle d'une variable globale: - /. Les objets personnalisés sont nécessaires, car ils représentent des instances individuelles d'un éditeur en ligne, avec différentes configurations (différents boutons de mise en forme, etc.). En tout cas - maintenant j'ai compris - merci beaucoup! – blacktarmac

my est une approche globale, donc au moment où l'événement click est déclenché, il sera toujours référence à l'objet retourné par le dernier appel.

Vous pouvez définir my local et définir la fonction de clic dans le constructeur obj.

Source

2010-03-26 23:12:24

JS onclick déclenche un mauvais objet

Répondre

Questions connexes