title: document.ready function is looping because of javascript creating DOM elements
body: <p>I'm currently working on something in javascript but i'm having the following issue. I got this function:</p>
  
  <pre><code>$kj(document).ready(function(){
      $kj('.bxslider').bxSlider({
          minSlides: 3,
          maxSlides: 4,
          slideWidth: 170,
          slideMargin: 10,
      });
  });
  </code></pre>
  
  <p>So if my document is loaded he is calling the bxSlider which has it's own javascript file. But in this javascript file there is the following function getting called:</p>
  
  <pre><code>setup();
  </code></pre>
  
  <p>What this does is the following (not copying all the code only the relevant piece):</p>
  
  <pre><code>var setup = function(){
          // wrap el in a wrapper
          el.wrap('&lt;div class="bx-wrapper"&gt;&lt;div class="bx-viewport"&gt;&lt;/div&gt;&lt;/div&gt;');
          // store a namspace reference to .bx-viewport
          slider.viewport = el.parent();
          // add a loading div to display while images are loading
          slider.loader = $('&lt;div class="bx-loading" /&gt;');
          slider.viewport.prepend(slider.loader);
          // set el to a massive width, to hold any needed slides
          // also strip any margin and padding from el
  [...... more code]
  });
  </code></pre>
  
  <p>As you can see this piece of code is creating DOM elements. So if i refresh or enter the page he keeps creating the bx-wrapper and bx-viewport and it's getting stuck in a never ending loop. It is probably because of the document.ready function. This function still thinks the page isn't loaded yet because my other javascript is creating DOM elements. If I do a hard refresh on the page I don't get this problem. So kinda weird tho. Anyone that has an solution for this?</p>
  
  <p>Thanks in advance.</p>
  
  <p>Greets, </p>
  
  <p>Wouter</p>