title: Backbone View Rendering and refreshes page
body: <p>I am still learning Backbone and have searched the entire day. I have a few views in my Page:
  The Employee View:</p>
  
  <pre><code>var EmployeeView = Backbone.View.extend({
      initialize: function(options){
  
          this.bus = options.bus;
          this.model.on("onChange", this.render, this);
          this.bind("venueSelected", this.model);
          this.updateButton = $("#employeeUpdate");
      },
      setup: function () {
          var self= this;
          this.get('data').on('change', function () {
              self.trigger("change");
          })},
      attributes : function () {
          // Return model data
          return {
              id : this.model.get("Id")
          }},
      events: {
          "click #employeeDelete": "onClickDelete",
          "click #employeeUpdate": "onClickUpdate",
          "click #employeeDetails": "onClickDetails"
      },
      onClickDetails: function(model){
          this.bus.trigger("venueSelected", this.model);
      },
      onClickUpdate: function(e, model){
          e.stopPropagation();
          $(e.currentTarget).attr("disabled", "true");
          //$('span[id*=updateBtn]').attr("disabled", "true");
          $("button.upd").attr("disabled", true);
  
          var updateEmployee = new UpdateEmployeeView({model: this.model, bus: this.bus});
          updateEmployee.render();
      },
      onClickDelete: function(){
          this.model.destroy();
          },
      render: function(){
          this.$el.attr("id", this.model.Id);
  
          this.$el.html("&lt;div row style='width:100%;'&gt;&lt;div class='col-sm-12 liRowMargin'&gt;" +this.model.get("Name") + "&lt;button id='employeeDetails' class='btn-primary btnFloat'&gt;Details&lt;/button&gt;" + "&lt;button id='employeeDelete' class='btn-primary btnFloat'&gt;Delete&lt;/button&gt;" + "&lt;button id='employeeUpdate' class='upd btn-primary btnFloat'&gt;Update&lt;/button&gt;" + "&lt;/div&gt;");
          return this;
      }
  });
  </code></pre>
  
  <p>The EmployeesView:</p>
  
  <pre><code>var EmployeesView = Backbone.View.extend({
  
      id: "employees",
      el: "#employeeList",
  
      initialize: function(options){
          this.options = options;
          if (!(options &amp;&amp; options.model))
              throw new Error("model is not specified.");
  
          this.bus = options.bus;
          this.model.on("add", this.onAddEmployee, this);
          this.model.on("remove", this.onRemoveEmployee, this);
          this.bus.on("onAddEmployee", this.onAddEmployee, this);
      },
      onRemoveEmployee: function(employee){
          this.$("li#" + employee.get("Id")).remove();
      },
      onAddEmployee: function(employee){
  
          employee.save();
         var view = new EmployeeView({model: employee, bus: this.bus});
         this.$el.append(view.render().$el);
      },
      render: function(){
          var self = this;
  
          this.model.each(function(employee){
          var view = new EmployeeView({ model: employee, bus: self.bus });
          self.$el.append(view.render().$el);
          });
  
          return this;
      }
  });
  </code></pre>
  
  <p>The AddRender View which I use to call another view on an event click:</p>
  
  <pre><code>var AddRender = Backbone.View.extend({
      el: "#newEmployee",
      id: "addRender",
  
      initialize: function(options){
          this.options = options;
          this.bus = options.bus;
      },
      events: {
          "click #btnNewEmployee": "OnClickNewEmployee"
      },
      OnClickNewEmployee: function(){
  
          var addEmployee = new AddNewEmployee({ bus : this.bus});
          addEmployee.render();
      },
      render: function(){
          this.$el.append("&lt;button id='btnNewEmployee'&gt;Add Employee&lt;/button&gt;");
      }
  });
  </code></pre>
  
  <p>Then the <code>AddNewEmployeeView</code> which is supposed to be used to add new employees :</p>
  
  <pre><code>var AddNewEmployee = Backbone.View.extend({
  
      id: "addingNewEmployee",
      el: "#newEmployeeAdd",
  
      initialize: function(options){
          this.options = options;
          this.bus = options.bus;
      },
      events: {
          "click #addNewEmployeeClick": "onClickAddNewEmployee"
      },
      onClickAddNewEmployee: function(){
  
          var employee = new Employee();
          employee.set('Name', $('#name').val());
          employee.set('KnownAs', $('#knownas').val());
          employee.set('Surname', $('#surname').val());
          employee.set('ContactNumber', $('#contactNumber').val());
          employee.set('Position', $('#position').val());
  
          //this.bus.trigger("onAddEmployee", employee);
  
          $("#name").val("");
          $("#knownAs").val("");
          $("#surname").val("");
          $("#contactNumber").val("");
          $("#position").val("");
          $("#name").focus();
  
          //this.$el.unbind();
          //this.$el.empty();
      },
      render: function() {
          console.log("Rendered Entry Point");
          this.$el.append("&lt;label&gt;Name:&lt;/label&gt;&lt;input type='text' autofocus id='name'/&gt;");
          console.log("Rendered");
  
          return this;
      }
  });
  </code></pre>
  
  <p>The challenge I am facing is that when ever I call the <code>OnClickNewEmployee</code> event from the <code>addRender</code> View to display the <code>AddNewEmployee</code> View, the <code>AddNewEmployee</code> View flashes and the entire page refreshes, I have seen that there is no event called after a page renders in Backbone but I am puzzled by what makes my page to refresh </p>