title: How to call a function after dynamically created "div" elements are ready
body: <p>I have a meteor application in which I've created some div elements and add them into a modal. When I create them, I position them on the modal by jquery's <code>.css(left:.., top:..)</code> method. After that, I call another function which creates lines between these created divs (by using <code>JSplumb</code> plug-in). </p>
  
  <p>My problem is that, Jsplumb tries to draw these lines as if my div elements are located on the top left of the modal. In other words, when I call the drawing lines function, it is not aware of the positions of my dynamically created elements on the modal. Therefore, I need to wait until the creation of div elements isfinished.</p>
  
  <p>So, my simplified version of creating div elements function is: </p>
  
  <pre><code>ConnectStates.prototype.constructResultSets=function(){
      var sourceResultEntity=$('&lt;div&gt;').attr('id','fooID').addClass('fooClassName');
      var sourceResultSetTitle=$('&lt;div&gt;').addClass('title').text(this.sourceStates[i]);
      var connect=$('&lt;div&gt;').addClass('ep');
      sourceResultEntity.append(sourceResultSetTitle);
      sourceResultEntity.append(connect);
      sourceResultEntity.css({left:($('.sourcePart').width()/2, top:70});
      // source part is a div inside modal-body
      $('.sourcePart').append(sourceResultEntity);
  }
  </code></pre>
  
  <p>and then I call draw line function</p>
  
  <pre><code>ConnectStates.prototype.connectResultSets=function(){
      // this is only one line, giving id of divs, nothing is important here
  }
  </code></pre>
  
  <p>My div's are placed in the correct places, but the line which is supposed to be between them is placed at the wrong position.</p>