正常情况下:

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

修改成:

//鼠标移入移出(顶部企业图标信息)
            $(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");
            });

备注原因:

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

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

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

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

摘抄自:https://www.cnblogs.com/RikuBlog/p/9530874.html

谢谢

12-20 07:59