title: Event does not bind when adding view dynamically
body: <p>I have two simple views, one with a button that creates a view and append it to the page. The new view consists of a single list item with a link and an event to I need to bind to each list item. I think the problem here is the el object: What I have been reading the el object should be created automatically when it's not defined on construction of the view? <a href="http://jsfiddle.net/BLP6J/29/" rel="nofollow">See this fiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="main"&gt;
      &lt;button type="button" class="add"&gt;Add view&lt;/button&gt;
      &lt;ul id="tasks" /&gt;
  &lt;/div&gt;
  
  &lt;script id="view-template-new-task" type="text/html"&gt;
      &lt;li&gt;&lt;a href="#" class="fire"&gt;Task&lt;/a&gt;&lt;/li&gt;
  &lt;/script&gt;
  ​
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var TaskView = Backbone.View.extend({
      events: {
          'click a.fire': 'fire'
      },
      fire: function() {
          alert('fire');
      },
      initialize: function() {
          this.template = _.template($('#view-template-new-task').html());
      },
      render: function() {
          $('#tasks').append(this.template());
      }        
  });
  var View = Backbone.View.extend({
      events: {
          'click button.add': 'addView'
      },
      addView: function(e) {
          var task = new TaskView();
          task.render();
      }
  });
  $(function() {
      var view = new View({
          el: $('#main')
      });
  });​
  </code></pre>