Backbone Click Events Breaking

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!

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.