title: JQuery not recognising elements added through backbone view even after using 'on'
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
   $('.tagLines').on('mouseover', function(){
    $(this).css("background-color","#ffffff").css("box-shadow", "0 0 4px 4px #C9C9C9");  
   }).on('mouseleave', function(){
    $(this).css('background-color', '#F7F7F7').css("box-shadow", "0 0 2px 2px #C9C9C9");
   }).on('click', function(){
    window.location.hash = "manageMarks";
   });
   
   //this section is for all the views used in the application
    var PGHome = Backbone.View.extend({
     tagName: 'div',
     
     initialize: function(){
      
     },
     
     render: function(){
      var template = _.template($("#home").html(), {} );
      this.$el.html( template );
     }
    });
    
    var pgHome = new PGHome({el: $("#bodyContainer") }); 
   //***********************************************************
  
   //this is a router for the application
    var NavRouter = Backbone.Router.extend({
     routes:{
      "manageMarks": "manage",
      "": "home"
     }
    });
    
     var navRouter = new NavRouter();
     navRouter.on('route:manage', function(){
      console.log("Manage Modules");
     }).on('route:home', function (){    
       pgHome.render();
     });
    
    Backbone.history.start(); 
   //****************************************** 
   
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>The above is a js snippet and its working as far as rendering  a view with backbone is concerned. The problem is after the view is rendered, the elements rendered's events (click, mouseover, mouseleave) are not firing. The events where working prior to adding them with backbone. Can anyone help?</p>