JavaScript not loading when injecting code

Hello all! I am trying to inject an off-canvas menu using jQuery. The actual injection works well with html/css, however, it does not load the foundation JavaScript, meaning the off-canvas menu does not open. I have tried rearranging the load order of the scripts all possible ways but none seem to work. What’s wrong here? Thanks in advance!

Here is the sample code of the file I am trying to inject to (note that the right off-canvas is not injected to compare it to the injected left off-canvas):

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- FOUNDATION DEFAULT STYLESHEET -->

  <link rel="stylesheet" href="/css/foundation.css" />

</head>

<body>

  <div class="off-canvas-wrapper">

    <div id="menunav"></div>

      <!-- Right Menu Off-canvas -->

      <nav>

        <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-transition="overlap" data-auto-focus="false" aria-hidden="true">

          <ul class="accordion" data-accordion data-allow-all-closed="true" data-multi-expand="true">

            <li class="accordion-item is-active" data-accordion-item><a href="#" class="accordion-title">SERVICES</a>

              <div class="accordion-content" data-tab-content>

                <ul class="menu vertical nested">

                  <li><a href="#">Item 1</a></li>

                  <li><a href="#">Item 2</a></li>

                </ul>

              </div>

            </li>

          </ul>

        </div>

      </nav>

    <div class="off-canvas-content" data-off-canvas-content>

      <header>

        <div class="row">

          <div class="small-12 columns text-center">

            <div class="button" data-toggle="offCanvas" aria-expanded="false" aria-controls="offCanvas">CONTACT</div>

          </div>

          <div class="small-12 columns text-center">

            <div class="button" data-toggle="offCanvasRight" aria-expanded="false" aria-controls="offCanvasRight">SERVICES</div>

          </div>

        </div>

      </header>

    </div>

  </div>

  <!-- Scripts -->

  <script src="../../js/vendor/jquerymin.js"></script>

  <script src="../../js/vendor/what-inputmin.js"></script>

  <!-- Menunav offcanvas LOADING SCRIPT -->

  <script> 

    $(function(){

    $("#menunav").load("/menunav.html"); 

    });

  </script>

  <script src="/js/vendor/foundation.min.js"></script>

  <!-- Initialize Foundation plugins -->

  <script>

    $(document).foundation();

  </script>

  </div>

</body>

</html>

And here is what I am trying to inject:

<!-- Left Menu Off-canvas -->

      <div class="off-canvas position-left" id="offCanvas" data-off-canvas data-transition="overlap" data-auto-focus="false" aria-hidden="true">

        <li><a href="#">Item 1</a></li>

        <li><a href="#">Item 2</a></li>

      </div>

Did you already try to use $.ready() and wrap the foundation initialization in an anonymous closure? Also please keep in mind that AJAX loaded content may have to trigger the initialization when it is fully loaded.

https://api.jquery.com/ready/