Javascript - en passant par la valeur dans une boucle

Question

je le code suivant dans une classe:

this.buttons = { 
     cancelButton:{buttonId: "cancelButton", buttonText:"Cancel", buttonClick: function(){alert('Cancel');}}, 
     confirmButton:{buttonId: "confirmButton", buttonText:"Ok", buttonClick: function(){alert('Ok');}}}; 
} 
for(var button in buttons){ 
    var buttonId = buttons[button].buttonId; 
    var buttonClick = buttons[button].buttonClick; 
    var buttonText = buttons[button].buttonText; 
    $("#confirmDialogWrapper #buttons").append('<button type="button" id="'+buttonId+'" class="button_neutral"><div class="btn_black"><div class="btn_black_inner">'+buttonText+'</div></div></button>'); 
    $("#confirmDialogWrapper #"+buttonId).click(function(){ 
     buttonClick(); 
     $("#popup_background").fadeOut(200); 
     $("#confirmDialogWrapper").remove(); 
     delete this; 
    }); 

Mon problème est que chaque bouton obtient la fonction « ButtonClick » de l'élément d'itération finale. Dans l'exemple ci-dessus, chaque bouton alerte "Ok" - ce qui n'est pas correct :) Cependant, la valeur de buttonText est correcte.

Toute aide serait appréciée.

Answer 1

Utilisez une autre fonction pour créer un nouveau champ:

for(var button in buttons){ 
    (function(button) 
    {  
     var buttonId = buttons[button].buttonId; 
     var buttonClick = buttons[button].buttonClick; 
     var buttonText = buttons[button].buttonText; 
     $("#confirmDialogWrapper #buttons").append('<button type="button" id="'+buttonId+'" class="button_neutral"><div class="btn_black"><div class="btn_black_inner">'+buttonText+'</div></div></button>'); 
     $("#confirmDialogWrapper #"+buttonId).click(function(){ 
      buttonClick(); 
      $("#popup_background").fadeOut(200); 
      $("#confirmDialogWrapper").remove(); 
      delete this; 
     }); 
    })(button); 
}