javascript - Javascript loaded & executed, but not working

Question

Totally stumped here. I have a div that gets its content loaded via jQuery's load() function:

$("#contentDiv").load("venue-kpis/index.php");

The content is a bootstrap HTML form, nothing fancy, with this javascript embedded at the end:

<script> 
$.() => {
    if(typeof state == 'undefined') {
        $.getScript("/venue-kpis/charts.js");
        $.getScript("/venue-kpis/venue-kpi.js", () => { initState($initialJsState) });
    }
});
</script>

FYI, state and initState is defined in venue-kpis.js and that's where all the javascript that controls the aforementioned form resides. Anyways, everything works great. At first. The page is accessed via an option in a bootstrap dropdown menu in my department's webpage's header:

<li><a href="#venue" onclick="loadContent('venue')">Venue KPIs</a></li>

Here's my problem: If you're on the page everything is fine, but if you click the link in the header to reload it, the none of the above javascript works; its like those 2 files were never loaded. However, they are loaded, because if I try to explicitly load them (e.g., by removing if(typeof state == 'undefined') from the above code), I get errors about variable and function re-declarations. Also, I can check the value of state in the console and its as it should be.

I've tried some different things here. I've tried replacing the calls to getScript with explicit script elements appended to head or body, but the behavior is the same.

I'm at a loss to explain what's going on; help!

标签： javascripthtmljquery