Re-Rendering & Appending Child View's HTML to DOM Seems to Not Re-Apply Child View's Events - backbone.js

Question

In the Marionette docs for CompositeView, it describes overriding appendHTML to customize the target the HTML of each itemView should be added to using jQuery's append.
Using a similar line of thinking, if I have two ItemView objects, a Parent and a Child, and Parent's template has an empty target <div class="target"></div> I'd like to inject Child's template inside of. I can use jQuery's html with an onRender in Parent to do this.
Throughout the course of the Parent's life, I want to flush out or replace the contents of .target with something else. If I later want to re-render Child into .target (since it may render it's template differently based on user interaction since the first rendering), I can use the same logic:
Render the Child template
Set .target's contents to Child's el with jQuery's html
The issue is, once this second rendering of Child has occurred, any events from the Child view seem to be lost.
Here is a concrete example of what I'm describing:
The HTML
<script type="template" id="parent">
<p><a class="re-render" href="javascript://">Re-Render</a></p>
<div class="target"></div>
</script>
<script type="template" id="child">
<p>The Link</p>
</script>
<div id="main"></div>
The Javascript
var Views = {};
Views.Child = Backbone.Marionette.ItemView.extend({
template: '#child',
events: {
'click a': 'changeBg'
},
changeBg: function() {
this.$el.css('background-color', '#'+Math.floor(Math.random()*16777215).toString(16));
}
});
Views.Parent = Backbone.Marionette.ItemView.extend({
template: '#parent',
childView: undefined,
ui: {
target: '.target'
},
events: {
'click .re-render': 'onRender'
},
initialize: function() {
this.childView = new Views.Child();
},
onRender: function() {
this.childView.render();
this.ui.target.html(this.childView.el);
this.childView.$el.css('background-color', 'transparent');
}
});
var App = new Backbone.Marionette.Application();
App.addRegions({
mainRegion: "#main"
})
App.mainRegion.show(new Views.Parent());
Clicking The Link in Child at first works great. Once Re-Render is clicked in Parent, the Child click event is never re-applied to the newly rendered version of the Child's template. How can I ensure the Child template's events will be re-applied each time the Child is rendered?
You can find a jsFiddle for this here.

Answer 1

You should call .delegateEvents() on the child view after it has been re-rendered:
onRender: function() {
this.childView.render();
this.ui.target.html(this.childView.el);
this.childView.delegateEvents();
this.childView.$el.css('background-color', 'transparent');
}
This is how to solve it in vanilla Backbone. I don't know if Backbone.Marionette has another way of handling the problem, but in Marionette terms you could add the delegateEvents call to the child view's onRender method to encapsulate the re-renderability.
Views.Child = Backbone.Marionette.ItemView.extend({
//...
onRender: function() {
this.delegateEvents();
}
});