関数を渡してコールバックをバインドしようとするとエラーが発生します

Question

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] || {}）エラーをスローする。|| handleObjを扱います。ハンドラ）.applyは関数ではありません。
.apply（matched.elem、args）;私が把握することはできませんよ

（line 3332）

。なぜこの方法がうまくいかないのでしょうか？

Answer 1

あなたがjQuery's on混乱している：[

.on（イベント[セレクタ] [データ]、ハンドラー（eventObject）が）
.on（イベントマップ[セレクタ]をデータ]）

Backbone's onを有する：

object.on（イベント、コールバック、[コンテキスト]）

バックボーンのはjQueryのはない第3引数としてコンテキストをとります。 jQueryのonは、第3引数を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); 
    } 
}); 

をし、バックボーンのイベント委譲システムは、物事の世話をしてみましょう：

通常は、もっとこのようにそれを行うだろう。

Answer 2

これは、この問題を抱えるGoogle社員向けです。私はまったく同じ問題を抱えていました。何が起こったのかは、エラーが報告された場所と、実際にエラーが発生した場所が2つの異なる場所にあることでした。

1行のコードが時代遅れだったと

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

のようなものを見て、コードの他のラインは類似していた：

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

エラーは、最初の呼び出しがそう、真の機能ではなかったということでしたエラーは正確で、呼び出された第2のハンドラは真の関数ではなく、jQueryはそれを完了できませんでしたが、2番目の関数呼び出しで発生したかのように常に動作しました。

このエラーが発生した場合は、トリガーされた余分なイベントハンドラを削除して、問題が解決するかどうかを確認してください。