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.