用oop调用jquery事件函数？答案

【问题标题】：jquery event function call with oop?用oop调用jquery事件函数？
【发布时间】：2011-02-27 14:15:46
【问题描述】：

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

【问题讨论】：

请访问stackoverflow.com/faq欢迎来到SO...

标签： javascript jquery oop events

【解决方案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。

【讨论】：

【解决方案2】：

在您的点击处理程序中， this 不再指代 Foo 对象，而是指发生点击的元素，在本例中为按钮元素。所以修复它的一种方法如下：

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

【讨论】：

试过但不起作用.. Foo.bar 中的 alert() 只会给我“未定义”，它应该显示 Foo.a 按钮的创建者 obj 的数量
它不起作用，因为$.click方法只接收到self.bar函数的引用作为参数，并且它将以this值指向触发的元素执行事件。

【解决方案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>

【讨论】：