尝试通过传入函数绑定回调会引发错误

时间:2012-06-13 21:30:18

标签: javascript jquery events backbone.js jquery-1.7

我只想在输入使用jQuery 1.7.2和Backbone.js更改值时触发事件。

目前我有以下(有效)

MyView: Backbone.View.extend({
  initialize: function() {

    this.colorInput = $("<input />", {
         "id": "color",
         "name": "color",
         "value": this.model.get("color")
    });

    var self = this;
    this.colorInput.on("change", function() {
      self.changeColor();
    });

  },
  changeColor: function() {
    var color = this.colorInput.val();
    this.model.set("color", color);
  }
});

我试图通过我的功能传递另一种方式。

this.colorInput.on("change", this.changeColor, this);

但是当试图这样做时,它会抛出错误

  

((jQuery.event.special [handleObj.origType] || {})。handle ||   handleObj.handler).apply不是函数
  .apply(matched.elem,args);

line 3332

我无法弄明白。任何想法为什么这种方式不起作用?

2 个答案:

答案 0 :(得分:11)

你感到困惑jQuery's on

  

.on(events [,selector] [,data],handler(eventObject))
   .on(events-map [,selector] [,data])

Backbone's on

  

object.on(事件,回调,[上下文])

Backbone的上下文是第三个参数,jQuery没有。看起来jQuery的on将你的第三个参数解释为handler(eventObject)并试图将其称为函数,这将解释你所看到的错误信息。

通常你会更喜欢这样做:

MyView: Backbone.View.extend({
  events: {
    'change input': 'changeColor'
  },
  initialize: function() {
    this.colorInput = $("<input />", {
       "id": "color",
       "name": "color",
       "value": this.model.get("color")
    });
  },
  render: function() {
    this.$el.append(this.colorInput);
    return this;
  },
  changeColor: function() {
    var color = this.colorInput.val();
    this.model.set("color", color);
  }
});

让Backbone的事件委托系统处理好事情。

答案 1 :(得分:3)

这适用于遇到此问题的Google员工。我有这个完全相同的问题,发生的事情是报告错误的地方和实际发生的错误位于两个不同的地方。

一行代码已过时,看起来像

$('#modal').on('click', function(e) {
   // Execute invalid code here.
});

另一行代码类似:

$('#modal').on('click', function(e) {
   // Execute valid code here.
});

错误是第一次调用不是真正的函数,所以错误是准确的,被调用的第二个处理程序不是真正的函数而jQuery无法完成它,但它总是表现得好像它发生了在第二个函数调用。

我说如果你遇到这个错误,请删除任何可能触发的额外事件处理程序,看看是否能解决问题。