title: backbone.js events and el
body: <p>Okay, so I've read several other questions regarding Backbone views and events not being fired, however I'm still not getting it sadly.  I been messing with Backbone for about a day, so I'm sure I'm missing something basic.  Here's a jsfiddle with what I'm working with:
  <a href="http://jsfiddle.net/siyegen/e7sNN/3/" rel="nofollow noreferrer">http://jsfiddle.net/siyegen/e7sNN/3/</a></p>
  
  <pre><code>(function($) {
  
      var GridView = Backbone.View.extend({
          tagName: 'div',
          className: 'grid-view',
          initialize: function() {
              _.bindAll(this, 'render', 'okay');
          },
          events: {
              'click .grid-view': 'okay'
          },
          okay: function() {
              alert('moo');
          },
          render: function() {
              $(this.el).text('Some Cow');
              return this;
          }
      });
  
      var AppView = Backbone.View.extend({
          el: $('body'),
          initialize: function() {
              _.bindAll(this, 'render', 'buildGrid');
              this.render();
          },
          events: {
              'click button#buildGrid': 'buildGrid'
          },
          render: function() {
              $(this.el).append($('&lt;div&gt;').addClass('gridApp'));
              $(this.el).append('&lt;button id="buildGrid"&gt;Build&lt;/button&gt;');
          },
          buildGrid: function() {
              var gridView = new GridView();
              this.$('.gridApp').html(gridView.render().el);
          }
  
      });
  
      var appView = new AppView();
  
  })(jQuery);
  </code></pre>
  
  <p>The <code>okay</code> event on the GridView does not fire, I'm assuming because <code>div.grid-view</code> does not exist when the event is first bound.  How should I handle the binding and firing of an event that's built on a view dynamically?  (Also, it's a short example, but feel free to yell at me if I'm doing anything else that I shouldn't)</p>