即使在使用＆＃39;之后，JQuery也无法识别通过骨干视图添加的元素。

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

上面是一个js片段，它的工作方式与渲染带有主干的视图有关。问题是在渲染视图后，渲染的元素的事件（click，mouseover，mouseleave）没有触发。在添加骨干之前工作的事件。有人可以帮忙吗？

Answer 1

您需要使用event delegation，因为您在将元素追加到页面

之前添加了事件

$("#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";
});

Answer 2

将DOM绑定到它时，DOM中没有.tagLine元素。

像这样的代码，

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 );
  }
});