Why do I need to re-delegate the events of a child view every time the parent view is being re-rendered?

Question

Of course, this will dependent on how you re-render you parent view. The parent view instantiates all it's sub-view in the initialize phase and simply appends them/replaces an element after the template has been rendered. For example this is how I would do in the render method:

this.$('.InputSearch').replaceWith(this.inputSearchView.$el);

So this.inputSerchView is an instance that has been affected in the initialize method.

The problem is that after the line above has been executed, the events callbacks are not being called anymore in the inputSearchView, I need to do:

this.delegateEvents();

I don't know why I have to do this, since backbone does this in the background:

this.$el.on(eventName, selector, method); 

this.$el never changes, so I don't know what's causing the problem. Any ideas?

Answer 1

When re-rendering the view, this is executed:

view.$el.html(Handlebars.compile(view.template)(context));

The html method removes event handlers from the child elements (from the jQuery doc)

Additionally, jQuery removes other constructs such as data and event handlers from child elements before replacing those elements with the new content.

This is why I have to rebind the elements/events