title: Backbone: Navigate function not working
body: <p>So for some reason navigate won't work in one of my views. I'm doing everything in one file for now, so that may be the problem. Also I know the code is horrible, I'm just messing around with backbone right now.</p>
  
  <p>EDIT: I put a <code>console.log()</code> in MarketingPage's function <code>route</code> and it never gets called, so there must be something wrong with the view.</p>
  
  <p>Also, this is the error I'm getting from chrome dev tools: </p>
  
  <pre><code>Error in event handler for 'undefined': IndexSizeError: DOM Exception 1 Error: Index or size was negative, or greater than the allowed value.
      at P (chrome-extension://mgijmajocgfcbeboacabfgobmjgjcoja/content_js_min.js:16:142)
      at null.&lt;anonymous&gt; (chrome-extension://mgijmajocgfcbeboacabfgobmjgjcoja/content_js_min.js:18:417)
      at chrome-extension://mgijmajocgfcbeboacabfgobmjgjcoja/content_js_min.js:1:182
      at miscellaneous_bindings:288:9
      at chrome.Event.dispatchToListener (event_bindings:390:21)
      at chrome.Event.dispatch_ (event_bindings:376:27)
      at chrome.Event.dispatch (event_bindings:396:17)
      at Object.chromeHidden.Port.dispatchOnMessage (miscellaneous_bindings:254:22)
  </code></pre>
  
  <p>Here's my code:</p>
  
  <pre><code>/*global public, $*/
  
  
  window.public = {
      Models: {},
      Collections: {},
      Views: {},
      Routers: {
  
      },
      init: function () {
          console.log('Hello from Backbone!');
      }
  };
  
  var App = Backbone.Router.extend({
      routes: {
          '': 'index',
          'register': 'route_register',
      },
  
      index: function(){
          var marketing_page = new MarketingPage();
      },
  
      route_register: function(){
          var register_view = new RegisterView();
      }
  });
  
  window.app = new App();
  
  var User = Backbone.Model.extend({
      url: '/user',
      defaults: {
          email: '',
          password: ''
      }
  });
  
  var MarketingPage = Backbone.View.extend({
      initialize: function(){
      this.render();
    },
    render: function(){
      var template = _.template($("#marketing-page").html());
          $('.search-box').after(template);
    },
    events: {
      'dblclick': 'route'
    },
    route: function(e){
        e.preventDefault();
        console.log("In route");
        window.app.navigate('register', {trigger: true});
        this.remove();
    }
  });
  
  var RegisterView = Backbone.View.extend({
      initialize: function() {
          this.render();
      },
      render: function(){
          var template = _.template($("#register-template").html());
          $('.search-box').after(template);
      }
  });
  
  $(document).ready(function () {
      Backbone.history.start();
  });
  </code></pre>
  
  <p>When I type <code>host/#register</code> into the browser directly, the register view gets rendered, but no matter what I do the click event won't seem to work...</p>