Не правильно применяется функция в цикле
 

Привет всем, собственно проблема в том, что когда я в цикле обхожу массив,

for (var key in opt.footer){
                        var _f = self.options.footer[key], _button = $(_f._button);
                        p.find(".p-footer").append(_button);
                        console.log(_f.action)
                        _button.click(function(evt){
                            _f.action(evt, p);
                        })
                    }

происходит какая то не понятная для меня ситуация, он применяет последнюю функцию к обеим button's, вот сам array

footer: [{_button: '<button>да</button>', action: function (evt, obj){
                                        obj.remove();
                                        alert("first")
                                        category_flag = true;

                                    }}, {_button: '<button >нет</button>', action: function (evt, obj){
                                        obj.remove();
                                        alert("second")
                                         }}]

,
подскажите как обойти эту проблему?

$.each(self.options.footer, function (i, _f){
                        var div = document.createElement("div");
                        var _button = _f._button;
                        div.innerHTML = _button;
                        var f = function (){alert(_f.action)}
                        div.firstChild.addEventListener("click", function(evt){
                            f()
                        })
                        p.find(".p-footer").append(div);
//                        console.log(_f.action)
                    });

вот так нормально работает, а почему в цикле не применялся?