jQuery代码无法通过xampp在Firefox中运行，而在其他浏览器中通过xampp以及Firefox在本地运行时无法运行
[英]jQuery code not working in Firefox through xampp, while it does in other browers through xampp and locally with Firefox
问题描述
My jQuery code isn't working with xampp in Firefox only , though it does when I locally open the html file in Firefox. 
我jQuery代码不与XAMPP 只工作在Firefox，但它确实当我在本地在Firefox中打开HTML文件。 It also does work with xampp in Edge, Chrome and IE. 它也不会在边缘，Chrome和IE XAMPP工作。 Here is the jQuery code: 这是jQuery代码：
$(document).ready(function (){
// Hightlight the menu button of the current page by comparing its href to the current url.
var url = window.location.href;
$('.navMenu a').each(function() {
if (url == (this.href)){
$(this).addClass('active');
}
});
// Highlight the login button if pressed and remove the highlights on other menu buttons.
$('.loginButton').click(function(){
$(this).toggleClass('active');
$('.login').slideToggle();
});
});
Here is my html code: 这是我的html代码：
<!DOCTYPE html>
<html ng-app="store">
<head>
<title>The Restaurant | Home</title>
<link rel="icon" href="../images/favicon.png">
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/layout.css">
<link rel="stylesheet" href="../css/login.css">
<script src="../scripts/angular.min.js"></script>
<script src="../scripts/jquery-3.1.0.js"></script>
<script src="../scripts/main.js"></script>
<script src="../scripts/UI.js"></script>
</head>
<body>
<header>
<figure>
<a href="home.html"><img src="../images/storelogo.png" alt="Logo of the store"></a>
</figure>
<nav>
<navigation-menu></navigation-menu>
</nav>
</header>
<main>
<login-menu></login-menu>
</main>
<footer>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</footer>
</body>
</html>
The jQuery code is in the UI.js file. jQuery代码在UI.js文件中。 In the main.js file this code exists: 在main.js文件中，此代码存在：
(function(){
var app = angular.module('store', []);
app.directive('navigationMenu', function(){
return {
restrict: 'E',
templateUrl: 'snippets/navigation-menu.html'
};
});
})();
And at last this is the code in the navigation-menu.html : 最后，这是navigation-menu.html中的代码：
<ul class="navMenu">
<li><a href="home.html">...</a></li>
<li class="dropdown">
<a href="tops.html">...</a>
<ul class="subMenu">
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>
</li>
<li class="dropdown">
<a href="bottoms.html">...</a>
<ul class="subMenu">
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>
</li>
<li class="dropdown">
<a href="accessories.html">...</a>
<ul class="subMenu">
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>
</li>
<li><a class ="loginButton">Log in</a></li>
</ul>
I've already tried several things myself: like mixing the script order and adding the event argument to the click function, but neither of these did work out. 我已经尝试过一些方法：例如混合脚本顺序并将事件参数添加到click函数，但是这些方法都没有解决。 One thing I did see was that when I replace the navigation-menu tags with the code that is in navigation-menu.html everything works fine. 我确实看到的一件事是，当我用navigation-menu.html中的代码替换navigation-menu标记时，一切正常。 So somehow the jQuery code gets run before angularjs adds the navigation-menu.html or something? 因此，以某种方式在angularjs添加navigation-menu.html之前运行jQuery代码吗？ Also the UI.js does get run, because an alert message if showing when I place an alert there. UI.js也会运行，因为如果在我放置警报时显示警报消息，则会显示该消息。
1 个解决方案
解决方案1
0 已采纳 2016-08-29 15:47:03
I've found a solution to my problem. 我已经找到解决问题的办法。 I had to put my jQuery code within a link function within a directive. 我不得不将我的jQuery代码放在指令内的链接函数中。 The link function makes sure it gets run after the directive has been compiled and linked up. 链接功能可确保在编译并链接了指令后即可运行它。 If someone wants the solution shown in code, just ask for it in a comment. 如果有人想要代码中显示的解决方案，只需在注释中提出要求即可。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.