вызов функции события jquery с помощью oop?

Question

var objs = new Array();

function Foo(a) {
    this.a = a
    $("#test").append($("<button></button>").html("click").click(this.bar));
}

Foo.prototype.bar = function () {
    alert(this.a);  
}

$(document).ready(function () {
    for (var i = 0; i < 5; i++) {
        objs.push(new Foo(i));
    }
});

можно ли сделать так, чтобы при нажатии кнопки

возвращает соответствующее значение Foo.a (из объекта Foo, который создал кнопку)?

Answer 1

Ответ @ Khnle близок, но при таком подходе вам нужна анонимная функция для использования ссылки self:

function Foo(a) {
  this.a = a;
  var self = this;
  $("#test").append($("<button></button>").html("click").click(function () {
    self.bar(); // correct `this` value inside `bar`
  }));
}

Вы также можете использовать метод $.proxy, чтобы сохранить контекст объекта:

function Foo(a) {
  this.a = a
  $("#test").append($("<button></button>")
            .html("click")
            .click($.proxy(this.bar, this)));
}

Проверьте приведенный выше пример здесь .

Answer 2

Внутри вашего обработчика кликов это больше не относится к объекту Foo, а к элементу, где происходит щелчок, который в данном случае является элементом кнопки. Итак, один из способов исправить это следующим образом:

function Foo(a) {
    this.a = a;
    var self = this;
    $("#test").append($("<button></button>").html("click").click(self.bar));
}

Answer 3

Вот еще стиль jQuery (без глобальных объектов или Foos)

   (function ($) {

       $.fn.aghragbumgh = function (settings) {
           var config = { 'a': 0 };

           if (settings) $.extend(config, settings);

           var bar = function () {
               alert(config.a);
           }

           this.each(function () {
               $(this).append($("<button></button>").html("click").click(bar));
           });

           return this;

       };

   })(jQuery);

    $(document).ready(function () {
        for (var i = 0; i < 5; i++) {
            $('#test').aghragbumgh({ 'a': i });
        };
    });      

Html:

<div id="test"></div>