事件处理程序返回未定义？

Question

假设我将 jQuery 单击事件的事件处理程序附加到我的对象的函数之一。但为什么它在我的属性上返回未定义？

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

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

Answer 1

在下面的 onclick 处理程序中，它指向 id 为“bind”的 dom 元素，并且它没有 label 属性。如果您有任何自定义属性作为标签，您应该使用 $(this).attr("label") 来检索它。试试这个

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

Answer 2

您正在传递 buttonView.onClick 引用的函数，但它与 buttonView 的关联未保留。

要通过 this 保留引用，您可以使用 jQuery.proxy ()^[文档] 方法。

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

现在，onClick 函数中的 this 将引用您的 buttonView 对象。

实例： http://jsfiddle.net/K72qs/

---

或者简单地制作一个在 onClick 函数中显式引用 buttonView：

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

实例： http://jsfiddle.net/K72qs/1/

Answer 3

你可以只使用：

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