Work with data-activates and jQuery load()

See more:

Javascript

jQuery

HTML5

Hello,

I'm trying to open a nav bar below on every page I have.

<nav>
    <ul id="slide-out" class="side-nav fixed">
        <li><a href="index.html">index</a></li>
        <li><a href="about.html">about</a></li>
        <li><a href="news.html">news</a></li>
        <li><a href="hybrids.html">hybrids</a></li>
        <li><a href="puppies.html">puppies</a></li>
    </ul>
    <a href="#" data-activates="slide-out" class="button-collapse"></a>
</nav>

For that I'm calling the html file with Jquery to load into the header tag:

$().ready(function () {
   $("header").load("master.html");
});

One thing I noticed is that the "slide out" effect is not working. After researching, I've found out that jQuery's load method "strips away" the script from html (please correct me if I'm wrong). Some suggested loading the script again, but it didn't work. I think it has something to do with the data-activates property/attribute, but I can't find much information about it.

Has anyone had this issue? how did you solve it?