title: Backbone/Marionette: Adding view events to a dynamically added view for a bootstrap modal
body: <p>I've got a Marionette layout and for demo purposes the html looks like:</p>
  
  <pre><code>&lt;header id="header-region" class="page-title"&gt;&lt;/header&gt;
  &lt;section id="template-content" class="full-section"&gt;
    &lt;div id="error-messages" class="fade main-section"&gt;&lt;!-- errors --&gt;&lt;/div&gt;
    &lt;div id="content-region"&gt; &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Its layout view's regions are:</p>
  
  <pre><code>regions: {
    header:  "#header-region",
    content: "#content-region"
  }
  </code></pre>
  
  <p>Up until now, I've had any given page's modal html inside the page's template html which would be contained in the <code>content</code> region.</p>
  
  <p>I have an idea to now create a separate region for modals to be shown in. 
  Changing things to look like this:</p>
  
  <p>Template:</p>
  
  <pre><code>&lt;section id="template-content" class="full-section"&gt;
    &lt;div id="error-messages" class="fade main-section"&gt;&lt;!-- errors --&gt;&lt;/div&gt;
    &lt;div id="content-region"&gt; &lt;/div&gt;
    &lt;div id="modal-region"&gt;&lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>And the region:</p>
  
  <pre><code>regions: {
    header:  "#header-region",
    content: "#content-region",
    modal: "#modal-region"
  }
  </code></pre>
  
  <p>So I'd like to be able to do something like this:</p>
  
  <pre><code>// Controller
  define([], function(){
      initialize: function(){},
      showHeaderView: function(){
         this.HeaderView = new HeaderView();
         this.layout.header.show(this.HeaderView);
      },
      showContentView: function(){
        // this.BodyView's template used to contain the modal html
        this.BodyView = new BodyView();
        this.layout.content.show(this.BodyView);
      },
      showModalView: function(){
        this.ModalView = new ModalView();
        this.layout.modal.show(this.ModalView);
      }
  });
  </code></pre>
  
  <p>This works and renders the modal properly but the modal's events are lost because they were originally set by this.BodyView.</p>
  
  <p>The modal has a checkbox that on <code>change</code> runs a function that is on this.BodyView but I want to bind the events for this.ModalView from this.BodyView. </p>
  
  <p>How can I accomplish that? I've tried making this.ModalView's el the same as this.BodyView's but that breaks things. I've tried to use <code>delegateEvents</code> as well but with no luck.</p>