title: jQuery UI Sortable Not Working With Dynamic Table
body: <p>I'm dynamically creating a table and trying to make each row (tr) sortable. I've followed the various documentation on the jQuery UI site and thought I understood. However, I can't quite seem to figure it out. </p>
  
  <p>Where did I go wrong? Thanks!</p>
  
  <pre><code> &lt;!doctype HTML&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="bootstrap.min.css"&gt;
      &lt;link href="css/bootstrap-form-helpers.min.css" rel="stylesheet" media="screen"&gt;
      &lt;link href="jquery-ui.css" type="text/css" rel="stylesheet"&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript&gt;" href="jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" href="bootstrap-2.2.2.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          $(function() {
              $( "tr" ).sortable();
              $( "tr" ).disableSelection();
          });
      &lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div class="center"&gt;
      &lt;form id="agenda_form"&gt;
          &lt;p&gt;Session Title&lt;/p&gt;
          &lt;input type="text" id="session_title"&gt;
          &lt;p&gt;Start Time&lt;p&gt;
          &lt;input type="number" id="start_time"&gt;
          &lt;p&gt;End Time&lt;/p&gt;
          &lt;input type="number" id="end_time"&gt;
          &lt;input type="submit" value="Submit" id="submit_form"&gt;
      &lt;/form&gt;
      &lt;table class="table-striped"&gt;
          &lt;tr&gt;
              &lt;td&gt;Session Title&lt;/td&gt;
              &lt;td&gt;Start Time&lt;/td&gt;
              &lt;td&gt;End Time&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
          $("#submit_form").click(function (event) {
              event.preventDefault();
              var $tr = $('&lt;tr /&gt;');
              $tr.append($("&lt;td /&gt;", { text: $("#session_title").val()} ))
              $tr.append($("&lt;td /&gt;", { text: $("#start_time").val()} ))
              $tr.append($("&lt;td /&gt;", { text: $("#end_time").val()} ))
              $tr.appendTo("table");
              $("#agenda_form").each(function (){
                  this.reset();
              });
          });
      &lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>