jQuery与oop事件函数调用？

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

是有可能让这个一个按钮被点击时，jQuery与oop事件函数调用？

它返回对应Foo.a值（从创建按钮富OBJ）？

来源

2010-06-04 andrew

请访问http://stackoverflow.com/faq欢迎SO ... – Reigel 2010-06-04 01:35:01

的@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。

来源

2010-06-04 01:38:37 CMS

在你的点击处理程序中，这不再指向Foo对象，而是发生点击的元素，这是本例中的按钮元素。因此，要解决这个问题的一种方法是如下：

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

来源

2010-06-04 01:30:15

尝试，但不工作..在Foo.bar中的alert（）只会给我“未定义”，它应该显示Foo.a按钮的创建者的数量obj – andrew 2010-06-04 01:38:02

它不起作用，因为'$ .click'方法只接收对'self.bar'函数作为参数，并且将使用'this'值指向元素来执行那触发了事件。 – CMS 2010-06-04 01:40:18

这里有更多的jQuery的风格（没有全局OBJ文件或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>

来源

2010-06-04 01:55:19 Luc

jQuery与oop事件函数调用？

回答

相关问题