js动态渲染的页面发现鼠标悬浮hover事件失效

在开发上，页面是通过调用ajax调用生成的HTML元素节点，发现鼠标悬浮hover事件失效了

$(function(){
	$.ajax({
			type:'post',
			url:ctx+'hbk/task/allTaskBefore12',
			dataType:'json',
			success:function(res){
				var html ;
				 for(var i=0;i<res.data.length;i++){
					var taskName = res.data[i].taskName;
					var copyName = taskName;
					if(taskName.length>30){
						taskName = taskName.substring(0,30)+"...";
					}
					var finishState = res.data[i].finishState;
					if(finishState=='0'){
						finishState='进行中';
					}else if(finishState=='1'){
						finishState='<span style="color:#4D80BC">已完成</span>';
					}
					html+="<tr class='showClild'>";
					html+="<th>"+taskName+"</th>";
					html+="<td>"+finishState+"</td>";
					html+="<td> ( "+res.data[i].completeNum+"/"+res.data[i].memberNum+" )</td>";
					html+="<td>"+res.data[i].allMemberNames+"</td>";
					html+="<td>"+res.data[i].createTime.substring(0,10)+"</td>";
					html+="</tr>";
					html+="<tr style='border: 2px solid #F1ECD3;background: #FFFDF0;'><td colspan='5' style='text-align:left'>"+copyName+"</td></tr>";
				}
				 $("#taskTbl").html(html); 
			},
			error:function(err){
				console.log("错误");
			}
		});
		
		// 鼠标悬浮特效
		 	$(".showClild").hover(function(){
				console.log("进入");
			},function(){
				console.log("移出");
			}); 

})

发现浏览器控制台一直不打印进入移出，后台通过网上查阅相关资料，这种动态加载的html页面，绑定事件将会失效。

解决方法一，Promise（）函数

参考博客 https://www.cnblogs.com/shuen/p/8987208.html

解决方法二、使用delegate（）函数

参考博客 https://blog.csdn.net/guojun0807/article/details/79552679

最终改用如下代码，解决了问题。

$(function(){
$.ajax({
			type:'post',
			url:ctx+'hbk/task/allTaskBefore12',
			dataType:'json',
			success:function(res){
				var html ;
				 for(var i=0;i<res.data.length;i++){
					var taskName = res.data[i].taskName;
					var copyName = taskName;
					if(taskName.length>30){
						taskName = taskName.substring(0,30)+"...";
					}
					var finishState = res.data[i].finishState;
					if(finishState=='0'){
						finishState='进行中';
					}else if(finishState=='1'){
						finishState='<span style="color:#4D80BC">已完成</span>';
					}
					html+="<tr class='showClild'>";
					html+="<th>"+taskName+"</th>";
					html+="<td>"+finishState+"</td>";
					html+="<td> ( "+res.data[i].completeNum+"/"+res.data[i].memberNum+" )</td>";
					html+="<td>"+res.data[i].allMemberNames+"</td>";
					html+="<td>"+res.data[i].createTime.substring(0,10)+"</td>";
					html+="</tr>";
					html+="<tr style='border: 2px solid #F1ECD3;background: #FFFDF0;display:none'><td colspan='5' style='text-align:left'>"+copyName+"</td></tr>";
				}
				 $("#taskTbl").html(html); 
			},
			error:function(err){
				console.log("错误");
			}
		}); 
		
		// 解决方案二，使用delegate
		$("body").delegate(".showClild","mouseover",function(){
			console.log("进入");
			$(this).next().show();
		})
		$("body").delegate(".showClild","mouseout",function(){
			console.log("移出");
			$(this).next().hide();
		})
})

使用delegate绑定mouseover和mouseout事件解决问题。

解决方案三、使用mTips插件

插件地址： http://www.jq22.com/jquery-info16219?tdsourcetag=s_pcqq_aiomsg