title: Maximum call stack size exceeded in JQuery
body: <p>I'm recently creating a UI system with JQuery for which I'm Including other HTML pages from JQuery <code>.load()</code></p>
  
  <p>The code something look like this:</p>
  
  <h1>load.js</h1>
  
  <pre><code>function loadScript (url, callback) {
      var script = document.createElement('script');
      script.src = url;
      script.onload = callback;
      document.head.appendChild(script);
  }
  Object.prototype.loadHTML = function (dir) {
      $(this).load(dir);
  }
  (function () {
       var apps = ['some_application']; //This is where, I list my apps.
       for (var x=0;x &lt; apps.length;x++) {
           loadScript('apps/' + apps[x] . '/init.js');
       }
  })();
  </code></pre>
  
  <h1>some_application/init.js</h1>
  
  <pre><code>(function () {
      var x = system.createApplication({'title':'Some Application'}) //This function works fine, I have tried and It returns a HTML DOM.
      x.loadHTML('apps/some_application/html/main.html'); // This file exists.
  })();
  </code></pre>
  
  <p>I am getting error saying </p>
  
  <blockquote>
    <p>Uncaught RangeError: Maximum call stack size exceeded</p>
  </blockquote>
  
  <p>In file <code>jquery-1.12.0.min.js:3</code>.
  Thank you in advance.</p>