title: Script is not executing from external file
body: <p>I've been stuck with a very stupid and mysterious issue for a few hours. JQuery works when between <code>&lt;script&gt;&lt;/script&gt;</code>, but not when called from an external file. I must be making a stupid mistake, but where??</p>
  
  <p>I have this in my HTML (standard bootstrap imports, as you'll notice):</p>
  
  <pre><code>&lt;!-- Bootstrap core JavaScript
      ================================================== --&gt;
      &lt;!-- Placed at the end of the document so the pages load faster --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="../static/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="../../assets/js/docs.min.js"&gt;&lt;/script&gt;
      &lt;!-- IE10 viewport hack for Surface/desktop Windows 8 bug --&gt;
      &lt;script src="../../assets/js/ie10-viewport-bug-workaround.js"&gt;&lt;/script&gt;
  &lt;!-- Custom JavaScript
      ================================================== --&gt;
  
  &lt;div class="col-xs-4"&gt;
      &lt;div id="my_camera"&gt;&lt;/div&gt;
      &lt;div id="send-button"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  ...
  </code></pre>
  
  <p>now, if I code directly inside the file, as below, <code>Title</code> gets displayed as expected:</p>
  
  <pre><code>&lt;!-- Custom JavaScript
          ================================================== --&gt;
      &lt;script&gt;$(function() {
      $( "#Title" ).append( '&lt;h1 class="text-capitalize"&gt;Title&lt;/h1&gt;' );
  });
      &lt;/script&gt;
      &lt;div class="col-xs-4"&gt;
          &lt;div id="my_camera"&gt;&lt;/div&gt;
          &lt;div id="Title"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>However if I put the <strong>same</strong> code in <code>custom.js</code>, nothing is displayed. Here is <code>custom.js</code> content:</p>
  
  <pre><code>$(function() {
      $( "#Title" ).append( '&lt;h1 class="text-capitalize"&gt;Title&lt;/h1&gt;' );
  });
  </code></pre>
  
  <p>And the modified HTML:</p>
  
  <pre><code>&lt;!-- Bootstrap core JavaScript
          ================================================== --&gt;
          &lt;!-- Placed at the end of the document so the pages load faster --&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="../static/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;script src="../../assets/js/docs.min.js"&gt;&lt;/script&gt;
          &lt;!-- IE10 viewport hack for Surface/desktop Windows 8 bug --&gt;
          &lt;script src="../../assets/js/ie10-viewport-bug-workaround.js"&gt;&lt;/script&gt;
      &lt;!-- Custom JavaScript
          ================================================== --&gt;
      &lt;script src="custom.js"&gt;&lt;/script&gt;   
  
      &lt;div class="col-xs-4"&gt;
          &lt;div id="my_camera"&gt;&lt;/div&gt;
          &lt;div id="Title"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>