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

约定不等于承诺〃 2022-10-06 08:54 209阅读 0赞

在页面是通过调用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/

发表评论取消回复

表情：

评论列表（有 0 条评论，209人围观）

还没有评论，来说两句吧...

相关阅读

相关 java工作复习——鼠标事件——action类——模拟鼠标悬浮操作

package jkcs; import org.openqa.selenium.By; import org.openqa.selenium.WebD

朱雀/ 2023年10月03日 17:03/ 0 赞/ 89 阅读

相关 vue项目中鼠标悬浮图片实现hover效果切换图片-案例

![20210525180109257.gif][] 1、使用css实现鼠标滑动切换图片效果 <ul class="ullist"> <li cla

àì夳堔傛蜴生んèń/ 2022年10月15日 14:50/ 0 赞/ 373 阅读

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

在页面是通过调用ajax调用生成的HTML元素节点，发现鼠标悬浮hover事件失效了解决方法一、使用delegate（）函数使用delegate绑定mouseover

约定不等于承诺〃/ 2022年10月06日 08:54/ 0 赞/ 210 阅读

相关 jq轻量级动态渲染表格

> 本来想用layui的，无奈插件开发担心第三方css注入影响到宿主网站，只能自己动手写了，模拟layui写的，可能存在bug,欢迎反馈 > ![在这里插入图片描述][wa

朴灿烈づ我的快乐病毒、/ 2022年09月14日 03:08/ 0 赞/ 283 阅读

相关 jq鼠标滚动事件

JQ鼠标滚动事件 $(document).on("mousewheel", function (e, delta) { var wheel =

拼搏现实的明天。/ 2022年09月04日 04:50/ 0 赞/ 218 阅读

相关 jQuery – 鼠标经过(hover)事件的延时处理

一、关于鼠标hover事件及延时鼠标经过事件为web页面上非常常见的事件之一。简单的hover可以用CSS :hover伪类实现，复杂点的用js。一般情况下，我们是

曾经终败给现在/ 2022年08月26日 13:27/ 0 赞/ 267 阅读

相关 hover事件

jquery代码如下： <script> $(".text").hover(function()\{ var inde=$(this).ind

红太狼/ 2022年05月27日 00:09/ 0 赞/ 259 阅读

相关鼠标悬浮提示

鼠标悬浮提示需求：添加一个帮助悬浮说明 css代码： .question { width: 20px;

短命女/ 2022年03月25日 13:10/ 0 赞/ 415 阅读

相关 jq用on给动态添加的dom节点绑定hover事件

1. 测试用 hover 是不行的, 语法不支持 > $(selector).on(event,childSelector,data,function,map)

素颜马尾好姑娘i/ 2021年09月18日 16:24/ 0 赞/ 473 阅读

相关 jq 给动态渲染的元素绑定事件

1. 语法 > $(selector).on(event,childSelector,data,function,map)　如下 $('div'

桃扇骨/ 2021年09月17日 20:04/ 0 赞/ 592 阅读