I'm running an instance of Moodle that separates the page contents into a lazyloading tab-like fashion, where the contents of a section are only loaded once the link is clicked by the user (but remain loaded thereafter, I think).
I have identical functions I want ran on each tab's content, but of course, the scripts loaded at the $(window).ready and $(document).ready levels have already ran. Right now I have duplicate scripts living and loading individually from each tab, but I hate it and feel like it must be effecting performance.
How can I re-run my function(s) on each tab after it's been clicked? I don't want to reload the page, just prod the scripts into running again. Since the page URL registers an anchor fragment for each link, I think the answer is a hashchange event but I don't know how to write it, or if it needs a listener? I'm so new to JS and jQuery outside of styling and basic functions. For example, I've tried
$(document).ready(function() {
//attaching the event listener
$(window).on('hashchange', function() {
$('#item').addClass('myClass')
}).trigger('hashchange');
});
I'm wondering if there's a variable or other syntax I need to include? Thank you so much for looking! I appreciate any help!