title: dynamically create sortable list and perform action on click
body: <p>I am dynamically creating a sortable list. However the .on('dblclick') action is not working for the newly created list items. It only works for the static list.  </p>
  
  <pre><code>$( "#sortable" ).sortable( "refresh" );  
  </code></pre>
  
  <p>refresh also doesnot seems to work.<br>
  Here's my full code</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;title&gt;jQuery UI Sortable - Default functionality&lt;/title&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="/resources/demos/style.css" /&gt;
      &lt;style&gt;
      #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
      #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
      #sortable li span { position: absolute; margin-left: -1.3em; }
      &lt;/style&gt;
      &lt;script&gt;
       $(document).ready(function () {
          $(function() {
              $( "#sortable" ).sortable();
              $( "#sortable" ).disableSelection();
          });
          var i = 10;
          $(window).load(function(){
              $('#btn_createList').click(function() {    
                  $('.ul_current').append('&lt;li id="foo_' + i + '" class="ui-state-default"&gt;&lt;span class="ui-icon ui-icon-arrowthick-2-n-s"&gt;&lt;/span&gt;' + i);
                  i++;
              $( "#sortable" ).sortable( "refresh" );
              });
          }); 
          $("#sortable li").on('dblclick',function(){
              alert($(this).attr('id'));
          });
  }); 
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
   &lt;ul id="sortable" class="ul_current"&gt;
      &lt;li id="foo_1" class="ui-state-default"&gt;&lt;span class="ui-icon ui-icon-arrowthick-2-n-s"&gt;&lt;/span&gt;Item 1&lt;/li&gt;
      &lt;li id="foo_2" class="ui-state-default"&gt;&lt;span class="ui-icon ui-icon-arrowthick-2-n-s"&gt;&lt;/span&gt;Item 2&lt;/li&gt;
      &lt;li id="foo_3" class="ui-state-default"&gt;&lt;span class="ui-icon ui-icon-arrowthick-2-n-s"&gt;&lt;/span&gt;Item 3&lt;/li&gt;
  
  &lt;/ul&gt;
  
   &lt;button id="btn_createList"&gt;add&lt;/button&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks in advance</p>