Run callback saved in variable on click

Question

I have an object containing a number of buttons (label and callback) which I dynamically want to add to the DOM:

var buttons = {
    'Save': function() {
        return false;
    },
    'Abort': function() {}
};

for(label in buttons) {
    $('#buttonbar').append('<button>' + label + '</button>');

    var callback = buttons[label];
    $('#buttonbar button:last-child').click(function() {
        //var result = callback();
        alert(callback);
    });
}

But regardless which button I click, the variable callback always contains the function of the last button. See this fiddle.

Any ideas how to solve that?

Thanks for the hint. That helped me to solve it. I will edit my question. — Lars Ebert, Jan 23 '14 at 14:08
If you feel the need to post a solution, you should put it in an answer, not the question. — Barmar, Jan 23 '14 at 14:10

score 0 · Accepted Answer · edited May 23 '17 at 12:21

Thanks to the hint given by Barmar I found the solution:

var buttons = {
    'Save': function() {
        return false;
    },
    'Abort': function() {}
};

for(label in buttons) {
    $('#buttonbar').append('<button>' + label + '</button>');

    var callback = buttons[label];
    (function(cb) {
        $('#buttonbar button:last-child').click(function() {
            alert(cb);
        });
    })(callback);
}

Run callback saved in variable on click

1 Answers1