MOUSEOVER在拼接的HTML无效处理

向右看齐 2022-12-17 05:58 115阅读 0赞

正常情况下：

//鼠标移入移出（顶部企业图标信息）
                $(".patternBg").mouseover(function (){  
                    $(".enterpriseContent").show();   
                }).mouseout(function () {
                    $(".enterpriseContent").hide();
                });

修改成：

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

//鼠标移入移出（顶部企业图标信息）
                $(document).delegate(".patternBg","mouseover",function(){
                    var forkIndex = $(this).index();
                    $('.enterpriseContent').eq(forkIndex).css("display","block");
                });
                $(document).delegate(".patternBg","mouseout",function(){
                    var forkIndex = $(this).index();
                    $('.enterpriseContent').eq(forkIndex).css("display","none");
                });

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

备注原因：

**JQ拼接显示的页面中鼠标事件失效**

**由于是先加载html在用js层绑定的所有后来加进来的html内容就不再绑定js了**

**所以我们需要利用delegate绑定，但是同样道理也不能写在普通的方法层里，因为这样还是会失效**

**所以本身拼接的时候我们就在componentDidMount()里我们就继续在尾部添加我们的delegate()**

原文地址：[https://www.cnblogs.com/RikuBlog/p/9530874.html][https_www.cnblogs.com_RikuBlog_p_9530874.html]

[48304ba5e6f9fe08f3fa1abda7d326ab.png]: /images/20221123/11aa8f5122334bb08d92b1380cf0a385.png
[https_www.cnblogs.com_RikuBlog_p_9530874.html]: https://www.cnblogs.com/RikuBlog/p/9530874.html

发表评论取消回复

表情：

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

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

相关阅读

相关无效字符在Java字符串处理中的问题

在Java字符串处理中，无效字符通常是指不符合字符串格式或编码规则的字符。例如： - `\0`：在C语言等系统中表示空字符。 - `超出Unicode范围的字符`：如果使用U

朱雀/ 2024年10月08日 18:18/ 0 赞/ 72 阅读

相关 mouseover与mouseenter的区别

mouseover(鼠标覆盖) mouseenter(鼠标进入) 二者的本质区别在于：是否冒泡 mouseover：划过元素及子元素都会触发，与之

Love The Way You Lie/ 2023年07月16日 13:59/ 0 赞/ 24 阅读

相关 MOUSEOVER在拼接的HTML无效处理

正常情况下： //鼠标移入移出（顶部企业图标信息） $(".patternBg").mouseover(function (){

向右看齐/ 2022年12月17日 05:58/ 0 赞/ 116 阅读

相关 :href= 拼接无效_无效的代码：href =“＃”是什么意思？

:href= 拼接无效 This particular code in an <a> tag is commonly seen in sample code that inv

╰半夏微凉°/ 2022年12月06日 15:38/ 0 赞/ 177 阅读

相关【ArcGIS风暴】GlobeLand30全球数据处理教程（批量投影转换、无效值处理、拼接）

> 本文讲述GlobeLand30全球数据批处理流程，主要步骤包括：批量分幅投影转换、批量分幅无效值处理、批量图幅拼接和成品展示。由于图幅数目和数据量较大，本文是采用Pytho

雨点打透心脏的1/2处/ 2022年10月16日 08:46/ 0 赞/ 446 阅读

相关动态拼接HTML css无效,js的append拼接html丢失css样式解决

JS调用中文乱码怎么办网络上有很多的实用的小插件,这些小插件可以直接拿过来实用即可,但是在使用的时候会出现很多的问题,就比如与说今天要讲的乱码中文乱码的问题,这个主要是因为

爱被打了一巴掌/ 2022年10月06日 03:58/ 0 赞/ 291 阅读

相关 jsp——动态拼接html

最近接触了一些用ajax动态拼接HTML，其实“动态拼接HTML”就是根据特定的条件显示或不显示一段HTML页 <table> <tbody> <

悠悠/ 2022年05月15日 04:51/ 0 赞/ 591 阅读

相关 Html js鼠标 Mouseover事件和Mouseout事件

Html js鼠标事件 Mouseover事件（重点）：鼠标移动到标签之上 Mouse 鼠标 Over 在…之上 Mouseout事件（重点）：鼠标离开标签

浅浅的花香味﹌/ 2022年04月15日 02:08/ 0 赞/ 336 阅读

相关 html 鼠标mouseover信息提示事件

一、使用背景：html页面中当鼠标指针位于元素上方时，弹出提示信息；二、添加弹出信息样式： <style> .pop-box \{ z-index

- 日理万妓/ 2022年04月03日 04:00/ 0 赞/ 829 阅读

相关 html5 audio在chrome中设置currentTime无效

原因：我用的是idea，idea自带的server返回mp3的header中没有Content-Range；后面我换成了tomcat服务器就没问题了参考链接： [http

悠悠/ 2021年09月28日 03:06/ 0 赞/ 307 阅读