backbone.js events not firing after re-render

Question

[EDIT: I solved earlier problem by calling delegateEvents(), but shouldn\'t have to. Re-posting w/more info.]

I have a View that when rendered has a login button on

Answer 1

I'm facing the same problem. The way I solved it for now is completely re- instantiating the View object with new MyView() this ensures that the events are rebound.

Hope that helps?

Answer 2

I found a solution to this, because I was having the same problem, actually detach() is not the solution because it will bring back the old DOM elements for you which is not useful.

this is what you need to do

render: function(){ this.$el.empty();  ......  this.$el.appendTo($DOM);   }

if you use the .html() method your events will not trigger. you need to attach the newly created HTML to the DOM, by using appendTo().

by the way this only happened to me if you are using tagName and className to build your view dynamically.

Answer 3

You empty the the #login div. As the jQuery doc says:

To avoid memory leaks, jQuery removes other constructs such as data and event handlers from the child elements before removing the elements themselves.

So you are effectively removing events from your views. I prefer to use detach because it keeps events. http://api.jquery.com/detach/

You can implement a show/hide in your views that will deal with this.

Answer 4

When using $(el).empty() it removes all the child elements in the selected element AND removes ALL the events (and data) that are bound to any (child) elements inside of the selected element (el).

To keep the events bound to the child elements, but still remove the child elements, use:

$(el).children().detach(); instead of $(.el).empty();

This will allow your view to rerender successfully with the events still bound and working.