关于javascript:尝试通过传入函数来绑定回调会抛出错误

Trying to bind a callback by passing in the function throws an error

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

目前我有以下(有效)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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);
  }
});

我试图用另一种方式来做,我只是传入我的函数。

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

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

((jQuery.event.special[handleObj.origType] || {}).handle ||
handleObj.handler).apply is not a function
.apply( matched.elem, args );

(第 3332 行)

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


你混淆了 jQuery 的 on:

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

与 Backbone 的 on:

object.on(event, callback, [context])

Backbone 将上下文作为第三个参数,而 jQuery 没有。看起来 jQuery 的 on 正在将您的第三个参数解释为 handler(eventObject) 并尝试像函数一样调用它,这将解释您看到的错误消息。

通常你会这样做:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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 的事件委托系统来处理。


这是为遇到此问题的 Google 员工准备的。我遇到了完全相同的问题,发生的事情是报告错误的位置和实际发生错误的位置在两个不同的地方。

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

1
2
3
$(‘#modal’).on(‘click’, function(e) {
   // Execute invalid code here.
});

另一行代码类似:

1
2
3
$(‘#modal’).on(‘click’, function(e) {
   // Execute valid code here.
});

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

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


原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/268769.html

(0)
上一篇 2022年6月20日
下一篇 2022年6月20日

相关推荐

发表回复

登录后才能评论