title: Why does DOM appendChild() fire on('load', ...) but jQuery append() does not?
body: <p>I have the following to snippets of code:</p>
  
  <pre><code>$(document).ready(function() {
      document.head.appendChild(
          $('&lt;script /&gt;').attr('src', 'source.js').on('load', function() {
              ...
          })[0]
      );
  });
  </code></pre>
  
  <p>This will fire the load handler.</p>
  
  <p>Whereas using the normal jQuery <code>append()</code>:</p>
  
  <pre><code>$(document).ready(function() {
     $('head').append(
          $('&lt;script /&gt;').attr('src', 'source.js').on('load', function() {
              ...
          })
      );
  });
  </code></pre>
  
  <p>This will not fire the load hander.</p>
  
  <p>What am I missing: why does jQuery <code>append()</code> not work?</p>
  
  <p>Is using <code>document.head.appendChild()</code> a bad idea?</p>
  
  <p>NOTE: I can't use <code>$.getScript()</code>. The code will run on a local file system and chrome throws cross site script errors.</p>
  
  <hr>
  
  <p><strong>Update</strong></p>
  
  <p>Some people had trouble reading the compact style, so I used extra line feeds to clarify which objects where calling which methods. I also made it explicit that my code is inside a <code>$(document).ready</code> block.</p>
  
  <hr>
  
  <p><strong>Solution</strong></p>
  
  <p>In the end I went with:</p>
  
  <pre><code>$(document).ready(function() {
      $('head')[0].appendChild(
          $('&lt;script /&gt;').attr('src', 'source.js').on('load', function() {
              …
          })[0]
      );
  });
  </code></pre>
  
  <p>I think @istos was right in that something in <code>domManip</code> is breaking <code>load</code>.</p>