正常情况下:
//鼠标移入移出(顶部企业图标信息) $(".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()