Why are events not firing after the second render in Backbone.js?

Question

I am creating an app in Backbone.js which has a parent and multiple child views. The child views contain links which they listen to and perform a function.

The parent st

Answer 1

You are probably using jquery remove function somewhere to remove the subviews from the view - it automatically removes all the events bound to the element (this.el) - set in the events object. You can either use this.delegateEvents() method in render of the subviews after you render template to rebind the event delegates set in events object or use jquery detach method instead to remove elements from DOM without removing event bindings (link). The delegateEvents method is quite costly and thus i'd recommend the detach method for removing elements that you want to reuse if you are rendering long lists of subviews - irrelevant if it's just a couple of views.

Other possibility is that you've set the events object wrong - hard to tell from the amount of code provided, but i bet on the first one.

Answer 2

A really common challenge. For future finders of this question, here's a great article about view rendering:

You just need to make sure that delegateEvents is called to rebind the events on your subviews any time .html() runs. And since Backbone’s setElement calls delegateEvents already, a quick solution could look like this...

http://ianstormtaylor.com/rendering-views-in-backbonejs-isnt-always-simple/