JQuery not recognising elements added through backbone view even after using 'on'

Question

$(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(); 
 //****************************************** 
 
});

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?

score 1 · Accepted Answer · edited May 23 '17 at 12:05

You need use event delegation, because you add events, before element has been appended to page

$("#bodyContainer").on('mouseover', '.tagLines', function(){
    $(this).css("background-color","#ffffff").css("box-shadow", "0 0 4px 4px #C9C9C9");     
}).on('mouseleave', '.tagLines', function(){
    $(this).css('background-color', '#F7F7F7').css("box-shadow", "0 0 2px 2px #C9C9C9");
}).on('click', '.tagLines', function(){
    window.location.hash = "manageMarks";
});

score 0 · Answer 2 · answered Dec 25 '14 at 10:57

There isn't .tagLine element in DOM when bind events to it.

The code like this,

var PGHome = Backbone.View.extend({
  tagName: 'div',

  events:{
    'mouseover .tagLines': function(){
        // ...
    },
    'mouseleave .tagLines': function(){
        // ...
    },
    'click .tagLines': function(){
        // ...
    }
  },
  initialize: function(){},
  render: function(){
    var template = _.template($("#home").html(), {} );
    this.$el.html( template );
  }
});

JQuery not recognising elements added through backbone view even after using 'on'

2 Answers2