Backbone events not binding to dom element

Question

In one of my views I have:

events: {
    'click .tab': 'doSomething',
},

then:

doSomething: function(){
    ...
},

This is a recurring structure in my views, but for some reason the 'doSomething' function is not being triggered by the click in this view.

When are the elements being bound to the event?

Any tips on debugging this?

Answer 1

link to fiddle here : http://jsfiddle.net/7xRak/

Omitting the selector causes the event to be bound to the view's root element (this.el).

if your class="tab" is views DOM element means this.el then you should bind event as

events : {
  'click' : 'dosomething'
}

and for inner element in this.el like

<div class="tab">
     <span class="inner"></span>
</div>

then you should bind event as,

  events : {
      'click' : 'dosomething'
      'click .inner' : 'onInnerClick'
    }

document : http://backbonejs.org/#View-delegateEvents

Answer 2

The delegation happens during the delegateEvents method at the end of the view constructor.

http://documentcloud.github.com/backbone/docs/backbone.html#section-144

Try manually calling this.delegateEvents() inside render before returning this. Are you futzing with this.el inside your initialize or render methods in a way that backbone isn't expecting?