Strange browser problem while loading an external file using query

I am trying to load an external file (navbar) using jquery thus:

<script>
    document.addEventListener("DOMContentLoaded", ready);
    function ready() {
        $("#leftNav").load("nav.html", function () {
            setSelected("dashboard");
        });
    }
</script>

Nav.html has sub-menu toggles that get called when user clicks a menu item.E.g.

<ul class="menu__subnav">
                        <li id="channel" class="menu__item " aria-haspopup="true"><a
                                href="channelInfo.html"
                                class="menu_link "><i
                                class="icon_bullet"><span></span></i><span
                                class="link-text">Channel Information</span></a></li>
                        <li id="newChannel" class="menu__item " aria-haspopup="true"><a
                                href="newChannel.html"
                                class="menu__link "><i
                                class="icon_bullet"><span></span></i><span
                                class="link-text">New Channel</span></a></li>
                        <li id="startChannel" class="menu__item " aria-haspopup="true"><a
                                href="startChannel.html"
                                class="menu__link "><i
                                class="icon_bullet"><span></span></i><span
                                class="link-text">Start Channel</span></a></li>

                    </ul>

Works fine in Safari, Chrome. However the sub-menu toggles don't seem to work in Firefox.Is there any way that Firefox renders DOM differently? Any pointers would be helpful!!

I have tried listening for window.load("DOMContentLoaded") event too but to no avail.