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 stores a list of all of the children views. In the render function, after it is done computing its own html, it does the following:


$(this.el).html(html);
for (var i = 0; i < this.views.length; i++){
    $('.children', this.el).append(this.views[i].render().el);
}

ANSWER: The problem was that I was creating the link during the render. I.e. on the first render (which was called from the init) the event successfully binded to the link. However, since all following calls of render recreate the whole element, the new link did not have the handler bound to it. This was solved via @Tom Tu solution of adding this.delegateEvents() to the render

Tom Tu Tom Tu · Accepted Answer · 2011-11-29T09:06:37

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.

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

2 Answers