当我用 Angular 的 ngRoute 更改 views/templates 时，jQuery 脚本没有暂停

Question

我被迫以一种特殊的方式构建 SPA。客户端只有一个静态文件服务器，所以我不能使用 AJAX 调用。

我正在使用 Angular 构建内嵌模板的功能，而且效果很好。但是，我的 JQuery 脚本无法在 returning 到索引页面上工作。现在，我所做的只是使用 JQuery 来更改图像的 CSS。当您 return 索引时它不起作用，除非您刷新。我担心这将继续成为一个问题，因为我构建了单独的模板并需要 mto 上的元素以不同的方式设置样式或动画。

这是代码（IMGS 是占位符，VioeoJS 在样板中以备将来使用）：

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="http://vjs.zencdn.net/6.8.0/video-js.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
    <link rel ="stylesheet" href ="CSS/custom.css" type = "text/css">
    <title>Know Your Risk</title>
  </head>



  <body ng-app="WXRisk">

    <div ng-view></div>



    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
    <script src = "JS/custom2.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src = "JS/custom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="http://vjs.zencdn.net/6.8.0/video.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

AngularJS

 var app = angular.module("WXRisk" , ["ngRoute", "ngAnimate"]);
    app.config(function($routeProvider){
      $routeProvider
      .when ("/", {
        template : "<div class = 'container'><div class ='row'><div class = 'col-xl-6'><a href = '#!Chatham'><img src='http://www.dishuser.com/TVMarkets/City%20Maps/Savannah.gif' class='img-fluid wx' alt=''></a></div><div class = 'col-xl-6'><img src='http://www.dishuser.com/TVMarkets/City%20Maps/Savannah.gif' class='img-fluid wx' alt=''></div></div><div class = 'row'><div class = 'col-xl-6'><img src='http://www.dishuser.com/TVMarkets/City%20Maps/Savannah.gif' class='img-fluid wx' alt=''></div><div class = 'col-xl-6'><img src='http://www.dishuser.com/TVMarkets/City%20Maps/Savannah.gif' class='img-fluid wx' alt=''></div></div></div>"
      })

      .otherwise({
        template : "<div class = 'container'><div class ='row'><div class = 'col-xl-6'><a href = '#!Chatham'><img src='http://www.dishuser.com/TVMarkets/City%20Maps/Savannah.gif' class='img-fluid wx' alt=''></a></div><div class = 'col-xl-6'><img src='http://www.dishuser.com/TVMarkets/City%20Maps/Savannah.gif' class='img-fluid wx' alt=''></div></div><div class = 'row'><div class = 'col-xl-6'><img src='http://www.dishuser.com/TVMarkets/City%20Maps/Savannah.gif' class='img-fluid wx' alt=''></div><div class = 'col-xl-6'><img src='http://www.dishuser.com/TVMarkets/City%20Maps/Savannah.gif' class='img-fluid wx' alt=''></div></div></div>"
      })

      .when("/Chatham", {
        template : "<a href = '#/!'>CLICK</a>"
      });

    });

JQuery

$(document).ready(function(){
  $(".wx").hover(function(){
    $(this).css("border", "10px solid red");
    $(this).css("width", "600px");
  }, function(){
    $(this).css("border", "6px solid red");
    $(this).css("width", "500px");
  }
);


  });

CSS

img {
  border: 6px solid red;
  border-radius: 20px;
  width: 500px;
  height: auto;
}

.row {
  padding-bottom: 10px;
  padding-top: 10px;
}

body {
  background-color: black;
}


@keyframes slideOutLeft {
    to      { transform: translateX(-100%); }
}

@keyframes scaleUp {
    from    { opacity: 0.3; -webkit-transform: scale(0.8); }
}


.ng-enter           { animation: scaleUp 0.5s both ease-in; z-index: 8888; }
.ng-leave           { animation: slideOutLeft 0.5s both ease-in; z-index: 9999; }

Answer 1

jQuery .on（.hover 是 .on("mouseenter mouseleave",...) 的 shorthand）仅适用于当前在 DOM 中的元素你叫它。因此，由于您的所有模板并未同时加载到 DOM（这就是 angularjs 路由的工作方式），因此每次加载模板时都必须进行 jQuery 调用有您要将悬停操作绑定到的项目。

但是 NONE 是需要的。您可以使用纯 CSS:

完成悬停样式

.wx {
    border-style: solid;
    border-color: red;
    border-width: 6px;
    width: 500px;       
}

.wx:hover {
    border-width: 10px;
    width: 600px
}

当我用 Angular 的 ngRoute 更改 views/templates 时，jQuery 脚本没有暂停

jQuery script not holding over when I change views/templates with Angular's ngRoute

html

jquery

angularjs

single-page-application

angular2-routing