在页面是通过调用ajax调用生成的HTML元素节点,发现鼠标悬浮hover事件失效了
解决方法一、使用delegate()函数
使用delegate绑定mouseover和mouseout事件解决问题。
$(function(){
$.ajax({
type:'post',
url:' ',
dataType:'json',
success:function(json){
var data = json.data,
dealPic = data.deal_pic,
dealHtml ;
if (json.status == 1) {
for (var i = 0; i < dealPic.length; i++) {
if (i == 0) {
var deal_pic = dealPic[i];
dealHtml += '<li class="item item-cur" data-src=' + deal_pic + '><img src=' + deal_pic + '></li>';
} else {
var deal_pic = dealPic[i];
dealHtml += '<li class="item" data-src=' + deal_pic + '><img src=' + deal_pic + '></li>';
}
}
$('.product_pic').html(dealHtml);
} else {
console.log(json.msg);
}
},
error:function(err){
console.log("错误");
}
});
// 使用delegate
$("body").delegate(".product_pic .item","mouseover",function(){
alert("进入");
})
})
解决方法二、使用mTips插件
插件地址: https://www.jq22.com/demo/mTips201710102347/