javascript - How to make JS be called only once for all pages? -
i have header.html
page keep loading dynamically javascript webpages via add_header.js
.
the header.html
includes notification badge shows red span number of notifications.
in add_header.js
have js function removes red span when badge clicked.
everything works great 1 page, when go other page, header.html
gets loaded again notification red again.
how can fix this, in order function executed 1 time pages?
webpage.html
<script src="js/add_header.js"></script> <div id="header"> </div>
my header.html
<div class="bootstrap-iso"> <li class="nav-item d-md-down-none"> <a id="notif-link" class="nav-link" href="#" title="notifications"> <span id="notif" class="badge badge-pill" style="background-color:red;"></span> </a> </li> </div>
my add_header.js
$(function(){ $("#header").load("header.html"); }); $(document).ready(function(){ var list_notif=["notification1","notification2","notification3","notification4"]; var number_notif=list_notif.length; $('#notif').text(number_notif); $('#notif-link').focus( function(){ $('#notif').remove(); }); });
Comments
Post a Comment