Currently, I am in the process of designing a basic HTML website for a non-profit organization. To streamline future updates, I plan to create a single HTML file and load it through ajax using the .load() method. While the .load() function is functioning properly, I am facing an issue with the drop-down menus not working; only the parent level loads. Interestingly, if I manually replace the div with the page being loaded, everything works as expected.
Below is the snippet of the menu/page that is being loaded via ajax:
<div class="navbar navbar_ clearfix">
<div class="navbar-inner">
<div class="nav-collapse nav-collapse_ collapse">
<ul class="nav sf-menu clearfix">
<li class="sub-menu"><a href="/adoptions.htm">Adopt</a>
<ul>
<li><a href="/adopt_a_cat.htm">Adopt a Cat</a></li>
<li><a href="/adopt_a_dog.htm">Adopt a Dog</a></li>
<li><a href="/vips.htm">VIPs</a></li>
</ul>
</li>
...
</ul>
</div>
</div>
</div>
This is the jQuery ajax call used (which is pretty straightforward):
$('#topNavBar').load('includes/_topNavBar.htm');
And here is where the content is loaded into through the div tag (if not hardcoded):
<div id="topNavBar"></div>
I have been struggling to figure out why the styling isn't applying to the HTML loaded via ajax. Any insights or solutions would be greatly appreciated!