更改后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; 
}

来源

2017-08-14 Mat.Now

角度变化的路由时，周围的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） –

尝试修改代码，如下所示。

$(document).on('.card','hover',function() { 
    /*your code goes here*/ 
});

来源

2017-08-14 09:08:09 kmg

更改后url路径脚本无法正常工作

回答

相关问题