jQuery-UI Dialog Buttons - pass argument to btn click function

I'm a begginer jQuery dev, and I'm using the jQuery UI dialog to show up properties of an object (whatever).

var $dialog = $('<div></div>')
    .html('This dialog will show every time!')
    .dialog({
        autoOpen: false,
        title: 'Properties'
    });

So this is the dialog, and let's say I have a FOR structure in which I add properties (p tags) and for some of those properties I want a button.

var dialogHtml = "";
var dialog_buttons = {};
for (var key in d.properties){
    var str;
    var str = '<p>' + something + '</p>';

    if (condition){
        dialog_buttons[key] = function()
            { functionName(key); };
    }

    dialogHtml = dialogHtml + str;
}
$dialog.dialog( "option", "buttons", dialog_buttons );
$dialog.dialog('open');

And somewhere else I have the function:

function functionName(key){
    // something something
}

This is where I have the problem: the key variable that's passed to the function... when the button is called the key is the last value from the iteration. Let's say we have keys 1, 2, 3, 4 then when the button is clicked, the key parameter will be 4.

I want when I click a button from the dialog, to know which button was pressed.

Can anybody help me?

Thanks开发者_开发技巧!

Using the event data from the click event (see here)

$('#btn').click(function(e) {
  functionName(e.target);
});

Explanation of Event.Target