Question

I’m building an app in Backbone using Node as the backend. As part of the app I’m handling click events on my views. An example is something like this:

window.MyView = Backbone.View.extend({
   tagName: 'section',
   className: 'calls',

   events: {
      'click a.first': 'gotoFirst',
      'click a.prev': 'gotoPrev',
      'click a.next': 'gotoNext',
      'click a.last': 'gotoLast',
      'click a.page': 'gotoPage'
   },

When I first load the view and click around everything works perfectly (click events get handled normally). However, if I navigate to a new view, and then go back to the first one the click events are broken.

By navigate to a new view I mean I do something like:

$container.empty();    
$container.append(window.myNewView.render().el);

Then I go back like so:

$container.empty();
$container.append(window.myView.render().el);

But when I rerender the view, my click events are broken. How can I fix this? Thanks in advance!

Answer 1

when you remove the view by calling .empty() you are destroying the DOM events halfway. but they aren’t re-attached when re-showing the view, automatically.

you have to jump through hoops to re-attach them. read this:

http://tbranyen.com/post/missing-jquery-events-while-rendering

the better answer is not to re-use view instances. create a new view instance every time you need to show a view.