Can't get backbone view to respond to events added by this.on()

Question

I want to listen to event/s in my View, but only after some processing (to be specific, I only what to respond to these events after a successful ajax call - that is all working, it's just this event stuff I can't figure).

Because of this, using the events property isn't going to achieve what I'm after.

I'm new to backbone and am at a loss as to what the problem is with my this.on('click'...) code below (backboneClicked() does not fire).

I have included the events property below as I put this in to test and it fires ourClick(). jqueryClicked() also fires.

Am I missing something really obvious?

I know there are lots of other questions about views not firing events, but I couldn't see anything that matched this question.

Any help appreciated.

var InputListView = Backbone.View.extend({
    el: '#input-list',

    events: {
        'click input'       : 'ourClick'
    },

    initialize: function(options) {         
        this.$el.click(this.jqueryClicked);

        this.on('click', this.backboneClicked);
    },

    ourClick: function(e) {
        alert('ourClick');
    },

    backboneClicked: function(e) {
        alert('backboneClicked');
    },

    jqueryClicked: function(e) {
        alert('jqueryClicked');
    }
});

Loamhoof Loamhoof · Accepted Answer · 2013-04-18T15:49:23

this.on('click', this.backboneClicked);

What behavior do you expect this to have? You can't click on a view, it's an object, not a DOM element... Though if you really want to test if it works, try add a this.trigger('click') after your line.

Still, I don't get what the point is here. If you're using the on method of Backbone, you're usually trying to listen to Backbone events (or custom events), not UI events.

Can't get backbone view to respond to events added by this.on()

1 Answers