title: Using Sortable on Dynamically Created UL
body: <p>This is probably an easy question for someone who uses JQuery regularly. I am simply reading a list from S3 into an array and using</p>
  
  <pre><code>document.getElementById('my-list').appendChild(makeUL(options));
  </code></pre>
  
  <p>to build a ul inside of a div with an id of my-list. It looks something like this:</p>
  
  <pre><code>&lt;div id="my-list"&gt;
      &lt;ul id="sortable"&gt;
          &lt;li class="ui-state-default"&gt;LivePD&lt;/li&gt;
          &lt;li class="ui-state-default"&gt;Football&lt;/li&gt;
          &lt;li class="ui-state-default"&gt;Walking Dead&lt;/li&gt;
          &lt;li class="ui-state-default"&gt;Survivor&lt;/li&gt;
          &lt;li class="ui-state-default"&gt;The Voice&lt;/li&gt;
          &lt;li class="ui-state-default"&gt;Shark Tank&lt;/li&gt;
          &lt;li class="ui-state-default"&gt;DWTS&lt;/li&gt;
          &lt;li class="ui-state-default"&gt;RHOOC&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have the sortable function as:</p>
  
  <pre><code>&lt;script&gt;
      $(function() {
          $("#sortable").sortable();
          $("#sortable").disableSelection();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here's the problem. If I hard code the ul into my HTML body as it is show above, the sortable code runs fine. It adds the ui-sortable class to the ul and li elements as it is supposed to. If I build the ul dynamically using getElementById, the base HTML renders exactly the same, but sortable does not add the classes.</p>
  
  <p>Does this have something to do with the order in which the DOM is executing? I simply can't figure it out and can not find another example of this anywhere. Completely open to other ideas as well.</p>