title: Backbone JS View Events not Firing?
body: <p>I'm trying to play around with Backbone JS and so far everything seems to be making sense and working smoothly.</p>
  
  <p>However with the code below, my custom events do not seem to be firing.  Anything in the below code stand out as to why that might be?  Do I need to "initialize" anything in the View?  Any other pointers on the code/structure would be cool as well.  Below is my full JS/HTML.</p>
  
  <p>JS</p>
  
  <pre><code>var Todo = Backbone.Model.extend({});
  
  var TodoCollection = Backbone.Collection.extend({
  
      model: Todo,
      url: '/Home/Todos'
  
  });
  
  var AppView = Backbone.View.extend({
  
      // where it should listen, required?
      el: $(".content"),
  
      events: {
          "keypress #new-todo": "enter"
      },
  
      initialize: function () {
          // _.bindAll(this, "render", "createOnEnter");
          // this.collection.bind("all", this.render);
      },
  
      hi: function () {
          alert('ohai');
      },
  
      render: function () {
          var lis = '';
          $.each(this.collection.models, function () {
              lis += '&lt;li&gt;' + this.get('Text') + '&lt;/li&gt;';
          });
          $('#todo-list').append(lis);
          return this.el;
      },
  
      enter: function (e) {
          alert('hi');
      }
  
  });
  
  
  var TodoController = Backbone.Controller.extend({
  
      routes: {
          "": "todos"
      },
  
      initialize: function (options) { },
  
      todos: function () {
          var todolist = new TodoCollection();
          todolist.fetch({
              success: function (data) {
                  var appview = new AppView({ collection: data });
                  appview.render();
              }
          });
      }
  
  });
  
  $(function () {
      window.app = new TodoController();
      Backbone.history.start();
  });
  </code></pre>
  
  <p>HTML </p>
  
  <pre><code>&lt;div id="todoapp"&gt;
      &lt;div class="content"&gt;
          &lt;input id="new-todo" placeholder="What needs to be done?" type="text" /&gt;
          &lt;div id="todos"&gt;
              &lt;ul id="todo-list"&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;a href="#"&gt;say hey&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>