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 obj）？

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

检查上面的示例here。

Answer 2

在您的点击处理程序中，这不再引用Foo对象，而是引发单击的元素，在这种情况下是按钮元素。所以解决它的一种方法如下：

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

Answer 3

这里有更多jQuery样式（没有全局objs或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>

用oop调用jquery事件函数？

3 个答案: