jQuery code not working in Firefox through xampp, while it does in other browers through xampp and locally with Firefox
Question
My jQuery code isn't working with xampp in Firefox only , though it does when I locally open the html file in Firefox. It also does work with xampp in Edge, Chrome and IE. Here is the jQuery code:
$(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:
<!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. In the main.js file this code exists:
(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 :
<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. 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. So somehow the jQuery code gets run before angularjs adds the navigation-menu.html or something? Also the UI.js does get run, because an alert message if showing when I place an alert there.
1 answers
solution1
0 ACCPTED 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. 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.