Click binding in jQuery with backbone

Question

I'm using Backbone.js, and in one of my main views I've encountered a very strange bug that I can't for the life of me figure out how to solve.

The view looks a look like the new Twitter layout. It receives an array of objects, each of which describes a collection and views elements that act on that collection. Each collection is represented by one tab in the view. The render() method on my view takes this array of collection objects, clears out the tabContainer DOM element if it isn't already empty, renders the tabs and then binds events to each of those tabs.

Now in my code I have the method to render the tabs and the method to bind the click handlers to those tabs sequentially. This works fine the first time I execute render(), but on subsequent calls of render(), the click handlers are not bound. Here's the relevant code snippet:

initialize: function() {
  // Context on render(), _addAllTabs and _bindTabEvents is set correctly to 'this'
  _.bindAll(this, 'render', 'openModel', 'closeModel', 'isOpen', 'addAllModels', '_switchTab',
                  'addOneModel', '_addTab', '_removeTab', '_addAllTabs', '_loadCollection', 
                  '_renderControls', '_setCurrentCollection', '_loadModels', '_bindTabEvents');
                
  this.template = JST['ui/viewer'];
  $(this.el).html(this.template({}));
  
  // The tabContainer is cached and always available
  this.tabContainer           = this.$("ul.tabs");
  this.collectionContainer    = this.$("#collection_container");
  this.controlsContainer      = this.$("#controls");
  this.showMoreButton         = this.$("#show_more_button");
},

render: function(collections, dashboard) {
  // If _bindTabEvents has been called before, then this.tab exists. I 
  // intentionally destroy this.tabs and all previously bound click handlers.
  if (this.tabs) this.tabContainer.html("");
  if (collections) this.collections = collections;
  if (dashboard) this.$("#dashboard").html(dashboard.render().el);
  // _addAllTabs redraws each of the tabs in my view from scratch using _addTab
  this._addAllTabs();
  // All tabs *are* present in the DOM before my _bindTabEvents function is called
  // However these events are only bound on the first render and not subsequent renders
  this._bindTabEvents();
  var first_tab = this.collections[0].id;
  this.openTab(first_tab);
  return this;
},

openTab: function (collectionId, e) {
  // If I move _bindTabEvents to here, (per my more thorough explanation below)
  // my bug is somehow magically fixed. This makes no friggin sense.
  if (this.isTabOpen(collectionId)) return false;
  this._switchTab(collectionId, e);
},

_addAllTabs: function() {
  _.each(this.collections, this._addTab );
},

_bindTabEvents: function() {
  this.tabs = _.reduce(_.pluck(this.collections, "id"), _.bind(function (tabEvents, collectionId) {
    var tabId = this.$("#" + collectionId + "_tab");
    tabEvents[collectionId] = tabId.click(_.bind(this._switchTab, this, collectionId));
    return tabEvents
  }, this), {});
},

_addTab: function(content) {
  this.tabContainer.append(
    $('<li/>')
      .attr("id", content.id + "_tab")
      .addClass("tab")
      .append($('<span/>')
        .addClass('label')
        .text(content.name)));
  //this._loadCollection(content.id);
  this.bind("tab:" + content.id, this._loadCollection);
  pg.account.bind("change:location", this._loadCollection); // TODO: Should this be here?
},

etc..

As I said, the render() method here does work, but only the first time around. The strange part is that if I move the line this._bindTabEvents(); and make it the first line of the openTab() method like in the following snippet, then the whole thing works perfectly:

openTab: function (collectionId, e) {
  this._bindTabEvents();
  if (this.isTabOpen(collectionId)) return false;
  this._switchTab(collectionId, e);
},

Of course, that line of code has no business being in that method, but it does make the whole thing work fine, which leads me to ask why it works there, but doesn't work sequentially like so:

this._addAllTabs();
this._bindTabEvents();

This makes no sense to me since, it also doesn't work if I put it after this line:

var first_tab = this.collections[0].id;

even though that is essentially the same as what does work insofar as execution order is concerned.

Does anyone have any idea what I'm doing wrong and what I should be doing to make this correct (in terms of both behavior and coding style)?

Answer 1

In your view's render function, return this.delegateEvents(); I think you are losing your event bindings across your renderings and you need to re-establish them.

See this link for the backbone.js documentation for that function: backbone.js - delegateEvents

Answer 2

When you switch tabs you are not simply showing/hiding content you are destroying and rebuild dom element so you are also destroying event liseners attached to them. that is why the events only work once and why adding _bindTabEvents into render works, because you are re-attaching the events each time.

when this line executes : this.tabContainer.html(""); poof... no more tabs and no more tab events.