Что не так с моим обработчиком событий?

Question

Допустим, я прикреплял обработчик события jquery click к одной из функций моих объектов. Но почему он возвращает undefined в моих свойствах?

var buttonView = {
              label   : 'underscore',
              onClick : function(){ alert('clicked: ' + this.label); },           
        };

$('#bind').bind('click', buttonView.onClick); //clicked: undefined --> why is it undefined ?

Answer 1

В приведенном ниже обработчике onclick это указывает на элемент dom с идентификатором "bind", и у него нет свойства label. Если у вас есть какой-либо пользовательский атрибут в качестве метки, вы должны использовать $ (this) .attr («метка»), чтобы получить его. Попробуйте это

 function(){ alert('clicked: ' + $(this).attr("label")) };

Answer 2

Вы передаете функцию, на которую ссылается buttonView.onClick, но ее связь с buttonView не сохраняется .

Чтобы сохранить ссылку через this, вы можете использоватьjQuery.proxy() ^{[документы]} метод.

$('#bind').bind('click', $.proxy(buttonView,'onClick')); 

Теперь this в функции onClick будет относиться к вашемуbuttonView объект.

Пример в реальном времени: http://jsfiddle.net/K72qs/

---

Или просто сделать явную ссылку на buttonView в функции onClick:

onClick : function(){ alert('clicked: ' + buttonView.label); },

Живой пример: http://jsfiddle.net/K72qs/1/

Answer 3

Вы можете просто использовать:

 $('#bind')
     .data('label', 'underscore')
     .click(function() {
         alert('clicked: ' + $(this).data('label'));
     });