在开发上,页面是通过调用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