Linking Javascript file inside AJAX content inside jQuery UI tab

Linking Javascript file inside AJAX content inside jQuery UI tab

My top level page implements a jQuery UI tab, each tab loading a separate HTML (or PHP) page.
Inside the child HTML/PHP pages, I want to load a .js file specific to those pages. The code in that .js doesn't get executed when tab loads. On the other hand, if I directly put the JS code inside the HTML page, it runs fine.

<DOCROOT>/index.html:
  1. <div id="tabs">
  2.       <ul>
  3.             <li><a href="firsttab/firsttab.html">first tab</a></li>
  4.             <li><a href="secondtab/secondtab.html">second tab</a></li>
  5.       </ul>
  6. </div>
<DOCROOT>/firsttab/firsttab.html:
  1. <body>
  2.       <script src="firsttab.js"></script>
  3. </body>
<DOCROOT>/firsttab/firsttab.js:
  1. alert('running JS from .js file');
This does NOT work. Even if I put the <script> tag in <head> section, it doesn't work. Console just says "SyntaxError: syntaxerror"

But, when I embed the script inside the HTML file itself, it works.

<DOCROOT>/firsttab/firsttab.html:
  1. <body>
  2.       <script>
  3.             alert('running JS from HTML file');
  4.       </script>
  5. </body>

Why doesn't first approach work? I do want to keep the js code for firsttab.html in the same location as a separate file for cleanliness and ease of coding. What I might be doing wrong?