вызов функции события 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 OBJ, создавшего кнопки)?

Answer 1

ответ @Khnle «s близко, но с таким подходом вам нужна анонимная функция, чтобы использовать 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>