javascript - 即使使用 'on' 之后，JQuery 也无法识别通过主干 View 添加的元素

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 片段，它的工作原理是渲染带有主干的 View 。问题是渲染 View 后，渲染的元素的事件(单击、鼠标悬停、鼠标离开)不会触发。这些事件在添加主干之前就已经开始工作了。有人可以帮忙吗？

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