更改后url路径脚本无法正常工作
问题描述:
我遇到第一次遇到的问题。问题是,当我刷新“主页”页面悬停在div上效果不错时,但如果我点击a href Attribute
即/home/courses
并返回到主页,此脚本悬停不起作用。在这个应用程序中,我使用角度路线和更改视图ng-view
也许这会造成问题?更改后url路径脚本无法正常工作
HTML
<div class="card">
<div class="all_course_view">
<div class="thumbnail image_course">
<div class="course_image">
<button class="btn btn-primary">See more</button>
</div>
</div>
<div class="caption">
<h3>Title</h3>
<h4>Subtitle</h4>
<div class="line-description my mt-15">
<span class="glyphicon glyphicon-road"></span>
</div>
<ol>
<ul class="list-group list-group-flush text-left">
<li>Description</li>
</ul>
</ol>
<div class="price">
<div class="col-md-4 text-right">
<span class="oldPrice">78$</span>
<span class="actualPrice">12$</span>
</div>
</div>
</div>
脚本
$(document).ready(function(){
$('.card').hover(
function(){
$(this).find('.course_image').slideDown(400); //.fadeIn(250)
},
function(){
$(this).find('.course_image').slideUp(0); //.fadeOut(205)
}
)
});
CSS
.course_image
{
position:absolute;
top:0;
right:0;
background: rgba(0, 0, 0, 0.57);
width:100%;
height:100%;
padding:2%;
display: none;
text-align:center;
color:#fff !important;
z-index:2;
}
答
尝试修改代码,如下所示。
$(document).on('.card','hover',function() {
/*your code goes here*/
});
角度变化的路由时,周围的DOM(即destory的元素,重新创建它们),你的事件处理程序尽快元素获得毁坏消失。而且,因为你只在dom准备好了处理程序,所以当元素被重新创建时它不会再被设置。 –
谢谢你的解释,任何让事件处理程序正常工作的选项? –
是做角的方式(不要在angularjs之外操作dom),使用角度事件指令,如[ngMouseover](https://docs.angularjs.org/api/ng/directive/ngMouseover),[ngMouseleave]( https://docs.angularjs.org/api/ng/directive/ngMouseleave)。因为你只是在做一个向下滑动的动画,所以你也可以使用CSS和[:hover psuedo class](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) –