Trying to bind a callback by passing in the function throws an error
backbone.js, events, javascript, jquery, jquery-1.7
Solution
You're confusing jQuery's `on`:
.on( events [, selector] [, data], handler(eventObject) ) .on( events-map [, selector] [, data] )
with Backbone's `on`:
object.on(event, callback, [context])
Backbone's takes a context as the third argument, jQuery's doesn't. Looks like jQuery's `on` is interpreting your third argument as the `handler(eventObject)` and trying to call it like a function, that would explain the error message that you're seeing.
Normally you'd do it more like this:
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);
}
});
and let Backbone's event delegation system take care of things.
Problem
I just want to fire an event when an input changes value using jQuery 1.7.2 and Backbone.js. Currently I have the following (which works) ``` 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); } }); ``` I was trying to do it the other way where I just pass in my function. ``` this.colorInput.on("change", this.changeColor, this); ``` But when trying to do it that way, it throws the error ((jQuery.event.special[handleObj.origType] || {}).handle || handleObj.handler).apply is not a function .apply( matched.elem, args ); (line 3332) Which I'm not able to figure out. Any ideas why this way doesn't work?