Using bootstrap-modal as Backbone.js view

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 events attribute of the view.

Unfortunately, bootstrap-modal seems to break Backbone's event delegation as it clones the view HTML before displaying the modal:

that.$element

      .appendTo(document.body)

      .show()

My view:

App.Views.ProjectsNav ||= {}



class App.Views.ProjectsNav.NewProjectView extends Backbone.View

  events: {

    'click .save': 'save',

    'shown':       'shown'

  }



  save: (e) ->

    ...

    false



  shown: () ->

    App.Helpers.Forms.setFocus($(@el), true)

    false



  render: () ->

    $(@el).html(ich.nav_edit_project_template(@model.toJSON()))

    @$('.modal').modal({'show': true, 'keyboard': true, 'backdrop': true})

    @

The corresponding (Mustache) HTML template:

<div class="modal hide" style="display: none; ">

  <div class="modal-header">

    <a href="#" class="close">×</a>

    <h3>New Project</h3>

  </div>

  <div class="modal-body form-stacked">

    <label for="name">Name</label> <input type="text" name="name" value="{{name}}"/><input type="hidden" name="lock_version" value="{{lock_version}}"/>

  </div>

  <div class="modal-footer">

    <a href="javascript:void(0)" class="save btn primary">Create</a>

    <a href="javascript:void(0)" class="cancel btn secondary">Cancel</a>

  </div>

</div>

Neither save nor shown are called when the respective events are triggered.

Any ideas?