Javascript 'this' context with jQuery

Question

У меня есть объект, ChatHandler, которому принадлежит div, а его div содержит некоторые другие элементы dom. Затем я связать обработчик события для некоторого подмножества элементов DOM, содержащихся в нем, например, так:

$(this.element).find('.render-box').unbind('click').click(this.handleBoxClick); 

и я указать некоторую функцию для обработки этих щелчков.

ChatHandler.prototype.handleBoxClick = function(event) { 
    // 'this' refers to a DOM object. 
    var partner = $(this).attr('partnerid'); 
    // But now I want to be able to access a public attribute of this object. 
    this.myAttribute = partner; 
} 

Как я могу получить доступ к общественным членам/функциям моего объекта ChatHandler? Я предполагаю, что я не могу изменить контекст выполнения, но должен быть какой-то способ сделать это, что мне не хватает.

Answer 1

Использование $.proxy связать значение this.

$(this.element).find('.render-box') 
       .unbind('click') 
       .click($.proxy(this, "handleBoxClick")); 

---

Или, если вам необходимо сохранить значение по умолчанию this в обработчик, вы можете передать объект как данные о событии.

$(this.element).find('.render-box') 
       .unbind('click') 
       .click(this, this.handleBoxClick); 

А затем к нему доступ через event.data в обработчике.

ChatHandler.prototype.handleBoxClick = function(event) { 
    var partner = $(this).attr('partnerid'); 
    event.data.myAttribute = partner; 
} 

Answer 2

Ditch прототип, и я бы избавиться от любого this ключевого слова - это будет запутаться:

ChatHandler = function() { 
    var self = this; 
    self.element = document.getElementById("wtv"); 
    self.myAttribute = undefined; 
    self.handleBoxClick = function() { 
     var partner = $(self.element).attr('partnerid'); 
     self.myAttribute = partner; 
    } 
    $(self.element).find('.render-box').unbind('click').click(self.handleBoxClick); 
}; 

new ChatHandler(); 

Answer 3

Пропустите элемент в явном виде, с помощью функции-оболочки, которая знает о вашем объекте ChatHandler.

this будет ссылаться на объект, и элемент по-прежнему доступен в качестве параметра.

var handler = this; 

$(this.element).find('.render-box').unbind('click') 
    .click(
    function(event) { 
     handler.handleBoxClick(this, event); 
    } 
); 

// ... 

ChatHandler.prototype.handleBoxClick = function(el, event) { 
    var partner = $(el).attr('partnerid'); 
    this.myAttribute = partner; 
};