binding backbone events in jqMobi Nav, or when the dom elements are duplicated in the dom

Question

I've been porting my app to use jqMobi and jqUI, but I've run into a problem with backbone delegating events.

The way jqUI creates a side nav bar is umm.... interesting to say the least.

Each panel can have a distinct nav bar, but the nav bar is never actually visible to the user, you populate the nav bar, and then jqUI copies the html into the div#menu element.

My view is fairly straightforward

MyApp.Views.UserMenu = Backbone.View.extend({
  el: 'nav#user_menu',

  initialize: function(){
    //empty out and unbind in-case it is already populated
    $(this.el).empty().unbind();

    this.render();
  },

  events: {
    "click div#add_friend": "new_friend"
  },

  render: function(){
    $(this.el).append(HandlebarsTemplates['friends/new_friend']());

    // here I am trying to change the 'el' to point to where the menu is in the DOM
    this.el = 'div#menu';                        
    this.delegateEvents();
    return this;       
  },

  new_friend: function(){
    alert('clicked');
  }
});

I've tried changing the el to the div#menu after populating the nav, but that isn't working. I've also tried populating the div#menu directly, but that doesn't seem to work either.

Any suggestions? I'm assuming the issue is that the elements are being moved, but it could be something else, and maybe I'm not sure how to debug the other case.