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

使用es6的Promise函数解决。
最终改用如下代码，解决了问题。

var preload = new Promise(function(open){
			$.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); 
					 open();
				},
				error:function(err){
					console.log("错误");
				}
			});
			
		});
		preload.then(function(){
			// 需要等HTML加载dom渲染完毕才能执行的js代码写在这里，即给元素绑定的各种事件
			// 鼠标悬浮特效
		 	$(".showClild").hover(function(){
				console.log("进入");
			},function(){
				console.log("移出");
			}); 
		})

解决方法二、使用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