I have a Backbone system consisting of nested sub-views in which I occasionally need to do the following.

1. Detach a child view from the DOM
2. Re-render the parent view from scratch (from a template)
3. Re-attach the child view at the correct place

I do this by calling something like $(parent.el).html(...) and then $(parent.el).append(child.el)

What I have always seen with this technique is that the event handlers on the child are lost. So I have tried a number of things, none of which have worked so far.

1. Detaching the child.el first with $.detach()
2. Cloning the child.el node and reattaching the clone
3. Calling child.delegateEvents() again after reattaching

The only thing that works for me is pletely rebuilding the child view from scratch. Does anyone have any ideas? Reattaching the existing node would be much more efficient.

Thanks!

I have a Backbone system consisting of nested sub-views in which I occasionally need to do the following.

1. Detach a child view from the DOM
2. Re-render the parent view from scratch (from a template)
3. Re-attach the child view at the correct place

I do this by calling something like $(parent.el).html(...) and then $(parent.el).append(child.el)

What I have always seen with this technique is that the event handlers on the child are lost. So I have tried a number of things, none of which have worked so far.

1. Detaching the child.el first with $.detach()
2. Cloning the child.el node and reattaching the clone
3. Calling child.delegateEvents() again after reattaching

The only thing that works for me is pletely rebuilding the child view from scratch. Does anyone have any ideas? Reattaching the existing node would be much more efficient.

Thanks!

• javascript
• dom
• backbone.js

Share Improve this question Follow asked Dec 1, 2011 at 15:02 maxl0rdmaxl0rd 1,44688 silver badges1111 bronze badges 7

• removing an element from the dom, will automatically mean your dom events are gone so i doubt you can append the childview again without having to rebind the dom events. or are you talking about Backbone events? (or both?) – Sander Commented Dec 1, 2011 at 16:21
• The example at api.jquery./detach seems to preserve attached events. BB's delegateEvent uses $(view.el).bind/delegate, so it should work in theory. – biziclop Commented Dec 1, 2011 at 16:55
• 2 detach() works as expected for me: jsfiddle/Xcrhb/1 – Roatin Marth Commented Dec 1, 2011 at 21:10
• Re-rendering the entire heirachy has always been performant for me until ~2000 entries in a collection, at least under Chrome. Why isn't this a good solution for you? – Elf Sternberg Commented Dec 2, 2011 at 21:14
• 1 Are you running into visible performance issues? If not, I agree with Elf. Save yourself a lot of headache and re-render the entire thing. – Johnny Oshika Commented Dec 5, 2011 at 8:33

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 3

I just had a similar problem. This seemed to work for me:

this.undelegateEvents();
this.$el.hide();
this.$el.detach();

// do whatever here

this.$el.appendTo(containerElement);
this.delegateEvents();
this.$el.slideDown('fast');

I'm still not exactly sure why the event listeners disappear, though I can confirm they are actually gone when I look in the Chrome developer tools window. It's strange, because Roatin Marth has an example (http://jsfiddle/Xcrhb/1) where this problem doesn't occur.

I do exactly the same.

// First of all pre-render child view
childView.render();

// Append in one place
parentView.$el.append(childView.el);

// Detach in another place
childView.$el.detach();

// And append it again
parentView.$el.append(childView.el);

What you're trying to do seems to be hack-ish to Backbone. You would be better off using native functionality by setting up event delegation and re-rendering views instead of detaching, cloning, altering and re-attaching. You don't get any performance increase by doing it.

It would be much easier to help if you explained why you need to do it this way and why native Backbone way of doing things does not work for you.