Question

I created a jQuery plugin that opens internal popup window using AJAX.

While calling the popup, I can set action buttons at the bottom of the popup window, with custom callback.

Here is the code that generates the buttons and set up the callback:

for(i in settings.buttons)
{
var button = settings.buttons[i];

$('<a></a>', {
    text: button.label,
    href: '#',
    click: function(e){
        e.preventDefault();
        button.callback.call();
    },
    'class': (typeof button.color == 'undefined' ? '' : button.color)
}).appendTo(popup.buttons);
}

The problem is, that the code calls the wrong callback, for example, if I set 2 buttons, one of them triggers close of the popup while the other one copies the value of some input, any of the buttons will trigger the second callback.

How should I fix it?

Answer 1

Since click function will execute after finish of for in loop. button.callback.call(); will always going to call last button callback.

solution: save context.

 function keepContext(button) {
      $('<a></a>', {
        text : button.label,
        href : '#',
        click : function(e) {
            e.preventDefault();
            button.callback.call();
        },
        'class' : (typeof button.color == 'undefined' ? '' : button.color)
    }).appendTo(popup.buttons);    
}
for (i in settings.buttons) {
    keepContext(settings.buttons[i]);
}