用过jq.appen() 追加的内容,js绑定的事件失效。

/ 笔记 / 无站内评论 / 569浏览

首先给大家看下效果,以后写项目绝对会遇到。

	//解析json成对象
	var data = jQuery.parseJSON(data); 
				
	$.each(data,function(i, value){

	//这里我通过appen追加数据。
	main.append('<div class="portfolio '+value.ft_type+' mix_all" data-cat="'+value.ft_type+'" style="display: inline-block;  opacity: 1;"> <div class="portfolio-wrapper"> <a target="_blank" href="${pageContext.request.contextPath}/fruit/show.action?id='+ value.id+'"><img src="${pageContext.request.contextPath}/'+value.ft_photo+'" width="" /> </a><div class="label"> <div class="label-text"> <a class="text-title">'+value.ft_name+'<span class="text-category" style="float:right;color:#FDE221">'+value.ft_type+'</span></a> <span class="text-category">'+value.ft_price+'</span></div> <div class="label-bg"></div> </div> </div> </div>');		
				});		
				
	//通过on方法绑定js事件
	$(".portfolio").on("mouseover mouseout",function(){

	//绑定事件效果
	$('#portfoliolist .portfolio').hover(function(){
	$(this).find('.label').stop().animate({bottom:-40},200,'easeOutQuad');
	$(this).find('img').stop().animate({top:0},500,'easeOutQuad');				
	},function(){
		$(this).find('.label').stop().animate({bottom:0},200,'easeInQuad');
		$(this).find('img').stop().animate({top:0},300,'easeOutQuad');								
	});	

	});

图中每个商品的内容都是通过异步访问数据库获取的,但是追加的html上面有事先写好的js事件。当鼠标移动到商品上面时,价格商品名消失。 在没有加on方法前,鼠标滑动事件完全没有触发。通过火狐F12发现,html上面没有该事件。

alt

废了好些力气查了发现,在通过appen追加内容的时候,是不会绑定html上原有的js事件的。只有通过追加完毕后手动写上追加的事件内容。 方法如下:

j	$(".追加最外层的div").on("mouseover mouseout",function(){
		//如果只有一个事件就直接写
	      //$(".追加最外层的div").on("click",function(){   click要绑定的事件类型 
          //比如我是鼠标滑动 因此写了mouseover mouseout

	  //绑定事件效果		这里写事件的js原代码  
		$('#portfoliolist .portfolio').hover(function(){
		$(this).find('.label').stop().animate({bottom:-40},200,'easeOutQuad');
		$(this).find('img').stop().animate({top:0},500,'easeOutQuad');				
		},function(){
			$(this).find('.label').stop().animate({bottom:0},200,'easeInQuad');
			$(this).find('img').stop().animate({top:0},300,'easeOutQuad');								
				});	```
召唤蕾姆
琼ICP备18000156号

鄂公网安备 42011502000211号