更改後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路徑腳本無法正常工作

回答

相關問題