title: Using bootstrap-modal as Backbone.js view
body: <p>I am attempting to create a Backbone.js view based on a Twitter bootstrap-modal, which makes use of Backbone's automatic event delegation via the <code>events</code> attribute of the view.</p>
  
  <p>Unfortunately, bootstrap-modal seems to break Backbone's event delegation as it clones the view HTML before displaying the modal:</p>
  
  <pre><code>that.$element
        .appendTo(document.body)
        .show()
  </code></pre>
  
  <p>My view:</p>
  
  <pre><code>App.Views.ProjectsNav ||= {}
  
  class App.Views.ProjectsNav.NewProjectView extends Backbone.View
    events: {
      'click .save': 'save',
      'shown':       'shown'
    }
  
    save: (e) -&gt;
      ...
      false
  
    shown: () -&gt;
      App.Helpers.Forms.setFocus($(@el), true)
      false
  
    render: () -&gt;
      $(@el).html(ich.nav_edit_project_template(@model.toJSON()))
      @$('.modal').modal({'show': true, 'keyboard': true, 'backdrop': true})
      @
  </code></pre>
  
  <p>The corresponding (Mustache) HTML template:</p>
  
  <pre><code>&lt;div class="modal hide" style="display: none; "&gt;
    &lt;div class="modal-header"&gt;
      &lt;a href="#" class="close"&gt;×&lt;/a&gt;
      &lt;h3&gt;New Project&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="modal-body form-stacked"&gt;
      &lt;label for="name"&gt;Name&lt;/label&gt; &lt;input type="text" name="name" value="{{name}}"/&gt;&lt;input type="hidden" name="lock_version" value="{{lock_version}}"/&gt;
    &lt;/div&gt;
    &lt;div class="modal-footer"&gt;
      &lt;a href="javascript:void(0)" class="save btn primary"&gt;Create&lt;/a&gt;
      &lt;a href="javascript:void(0)" class="cancel btn secondary"&gt;Cancel&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Neither <code>save</code> nor <code>shown</code> are called when the respective events are triggered.</p>
  
  <p>Any ideas?</p>