title: How to bind events to DOM after initialize function in backbone?
body: <p>I have backbone view that binds an action to an element in the DOM. The problem is that the DOM element hasn't been rendered when the events is called. My code looks like this:</p>
  
  <pre><code>  // Change the focus to a full goal view
    var GoalFullView = Backbone.View.extend({
  
      // Bind the goal full view
      el: $("#main"),
  
      // Events for making changes to the goal
      events: {
        "keypress #goal-update": "createOnEnter",
      },
  
      // Cache the template for the goal full view
      template: _.template($("#goal-full-template").html()),
  
      // Render the goal full and all of its goal updates
      initialize: function() {
        this.render();
        this.collection = new GoalUpdateList;
        this.collection.bind('add', this.addOne, this);
        this.collection.bind('reset', this.addAll, this);
  
        this.collection.fetch();
      },
  </code></pre>
  
  <p>As you can see, the event binding occurs before the initialization so it cannot locate the DOM element because it hasn't been rendered. How can I delay the event binding until after initialize?</p>
  
  <p>Edit 1:
  Hmm, I do a console log, and it prints something out on a keypress, but I am getting this message in my Chrome's developer console:</p>
  
  <pre><code>Uncaught TypeError: Cannot call method 'apply' of undefined
  </code></pre>
  
  <p>What does this mean?</p>