title: Backbone can't find input field element from template
body: <p>I have a view for a form. I load a new model into the view by:</p>
  
  <pre><code>app.fView = new app.FormView({model: new app.aName});
  this.$("#formSpace").append(app.fView.render().el);
  </code></pre>
  
  <p>On the <code>initialize</code> function I expect it to spit <code>initialize form!</code> since the default name value is empty quotes, but instead I get <code>initialize form! undefined</code> suggesting that the form hadn't rendered by the time initialize starts.</p>
  
  <p>Additionally, the <code>createOnEnter</code> function produces the desired output, but the <code>createOnClick</code> returns undefined. I'm baffled.</p>
  
  <p>The View:</p>
  
  <pre><code>app.FormView = Backbone.View.extend({
  
  tagName: 'div',
  
  className: 'nameGenForm',
  
  template: _.template($('#form-template').html()),
  
  events: {
      "keyup #nameEntry"  : "createOnEnter",
      "click #addNameButton"  : "createOnClick",
      "submit #nameEntry"     : "submitFail"
  },
  
  render: function() {
      this.$el.html(this.template(this.model.toJSON()));
      return this;
  },
  
  initialize: function() {
      this.$namein = this.$("#inputName");        
      console.log('initialize form! ' + this.$("#inputName").val());
  },  
  
  submitFail: function() {
  
      return false;
  },
  
  createOnEnter: function(e) {
      console.log('enter! ' + this.$("#inputName").val());
  
      if (e.keyCode != 13) return;
      if (!this.$namein.val()) return;
  
      //this.createNew();
  },
  
  createOnClick: function(e) {
  
      console.log('createOnClick ' + this.$namein.val());
      if (!this.$namein.val()) return;
      console.log('clicked! ' + this.$namein.val());
  
      //this.createNew();
  },
  
  createNew: function() {
      app.Names.create({
          name: this.$namein.val(),
          gender: $('#nameEntry .genderButton[class*="active"]').val()
      });
  
      this.remove();
  },
  
  testing: function() {
      this.$("#nameEntry").submit( function() {
          alert('submitted again');
          return false;
      });
      console.log('current value ' + this.$("#inputName").val());
  },
  
  clear: function() {
      console.log('removing!');
      this.remove();
  }
  
  });
  </code></pre>
  
  <p>And here is the template</p>
  
  <pre><code>    &lt;script type = "text/template" id = "form-template"&gt;
          &lt;form class = "form-horizontal" id = "nameEntry"&gt;
              &lt;div class = "control-group"&gt;
                  &lt;label class = "control-label" for = "inputName"&gt;Person's Name&lt;/label&gt;
                  &lt;div class = "controls"&gt;
                      &lt;input type = "text" id = "inputName" placeholder = "Name" value = "&lt;%- name %&gt;"/&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class = "control-group"&gt;
                  &lt;label class = "control-label" for = "inputGender"&gt;Gender&lt;/label&gt;
                  &lt;div class = "controls"&gt;
                      &lt;div class = "btn-group" data-toggle = "buttons-radio"&gt;
                          &lt;button type = "button" class = "genderButton btn &lt;%= gender == 'Male' ? 'active' : '' %&gt;" value = "Male"&gt;Male&lt;/button&gt;
                          &lt;button type = "button" class = "genderButton btn &lt;%= gender == 'Female' ? 'active' : '' %&gt;" value = "Female"&gt;Female&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class = "control-group"&gt;
                  &lt;div class = "controls"&gt;
                      &lt;button type = "button" class = "btn" id = "addNameButton"&gt;
                          &lt;%= app.appState.get('action') === 'edit' ? 'Save' : 'Add Name' %&gt;
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/script&gt;
  </code></pre>