javascript - 我的 jQuery 弹出插件按钮调用错误的回调

Question

我创建了一个使用 AJAX 打开内部弹出窗口的 jQuery 插件。

在调用弹出窗口时，我可以在弹出窗口底部设置操作按钮，并带有自定义回调。

这是生成按钮并设置回调的代码：

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);
}

问题是，代码调用了错误的回调，例如，如果我设置了 2 个按钮，其中一个触发关闭弹出窗口，而另一个复制某些输入的值，任何按钮都会触发第二个回调。

我应该如何解决它？

Answer 1

由于单击功能将在for in循环完成后执行。 button.callback.call();将始终调用最后一个按钮回调。

解决方案：保存上下文。

 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]);
}