title: Backbone.js Events not firing
body: <p>I have a view I am able to load.  However the events do not fire.  Here is the view:</p>
  
  <pre><code>MapModalView = Backbone.View.extend({
  events: {
      'click #closeMapModal': 'closeModal',
      'click #modal_streetview': 'renderStreet'
  },
  initialize: function(){
      this.el = $('.modal_box');
      this.template = _.template($('#map-modal-template').html());
      _.bindAll(this, 'renderMap', 'renderPin');
  },
  
  render: function(){
      $(this.el).show().append(this.template({
          model: this.model
      }));
      this.renderMap();
      this.renderPin();
  },
  renderMap: function(){
      this.thisLat = _this.model.get('lat');
      this.thisLng = _this.model.get('lng');
      this.modalMap = new google.maps.Map(document.getElementById('modalMap'), {
          zoom : 12,
          center : new google.maps.LatLng(this.thisLat, this.thisLng), // VANCOUVER
          mapTypeId : google.maps.MapTypeId.ROADMAP
      });
  },
  renderPin: function(){
      marker = new google.maps.Marker({
          position : new google.maps.LatLng(this.thisLat, this.thisLng),
          map : this.modalMap,
          animation : google.maps.Animation.DROP,
          icon : '/img/lazy-pin.png'
      });        
  },
  renderStreet: function(e){
      e.preventDefault();
      this.modalMap.getStreetView().setPosition(this.modalMap.center);
      this.modalMap.getStreetView().setVisible(true);
  },
  closeModal: function(e){
      alert('hello');
      e.preventDefault();
      $(this.el).hide().find('div').remove();
  }
  </code></pre>
  
  <p>})</p>
  
  <p>I removed one of the event functions because it wasn't important.  Anyways, this view is initialized in my router:</p>
  
  <pre><code>    this.mapModalView = new MapModalView();
  </code></pre>
  
  <p>And I have a tooltip view, which has an event inside of it, that calls the render function from ModalMapView.  Here is that View:</p>
  
  <pre><code>ToolTipView = Backbone.View.extend({
  initialize: function() {
      this.template = _.template($('#toolTip').html());
      this.mapTemplate = _.template($('#map-modal-template').html());
      this.model.bind('change:tooltip', this.toggleTooltip, this);
      return this;
  },
  
  events: {
      'mouseenter': 'toolTipOn',
      'mouseleave': 'toolTipOff',
      'click #show-restaurant-map': 'mapModal'
  },
  
  mapModal: function(){
      router.mapModalView.render(this.model);
  },
  
  render: function() {
      $(this.el).html(this.template({
          model: this.model
      }));
      this.delegateEvents();
      return this;
  
  }
  </code></pre>
  
  <p>});</p>
  
  <p>I removed the functions that I didnt think would be important again above.</p>
  
  <p>Also, here is my template:</p>
  
  <pre><code>&lt;script type="text/template" id="map-modal-template"&gt;
  &lt;div id="map_modal"&gt;
      &lt;button title="Close" id="closeMapModal" class="right"&gt;Close&lt;/button&gt;
      &lt;h3&gt;Restaurant Map &amp;amp; Access Information&lt;/h3&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#" title="Map View" id="modal_mapview"&gt;Map&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" title="Street View" id="modal_streetview"&gt;Street View&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" title="Parking &amp;amp; Access Info" id="modal_parking"&gt;Parking &amp;amp; Access Info&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div id="modalMap"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>and of course, my HTML markup on the page I am working on:</p>
  
  <pre><code>&lt;div class="modal_box"&gt;&lt;/div&gt;
  </code></pre>