title: Dynamically Generated HTML codes do not have jQuery attributes
body: <p>I have a list of Div that is made draggable by using jquery.</p>
  
  <pre><code>        &lt;div id="external-events"&gt;
          &lt;h4&gt;List Of Staffs&lt;/h4&gt;
                &lt;div class="external-event" data-id="1"&gt;Name&lt;/div&gt; //Draggable
          &lt;/div&gt;
  </code></pre>
  
  <p>This is the code that makes it draggable</p>
  
  <pre><code>        $('#external-events div.external-event').each(function () {
  
              // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
              // it doesn't need to have a start or end
              var eventObject = {
                  title: $.trim($(this).text()),
                  id: $(this).data('id')
              };
  
              // store the Event Object in the DOM element so we can get to it later
              $(this).data('eventObject', eventObject);
  
              // make the event draggable using jQuery UI
              $(this).draggable({
                  zIndex: 999,
                  revert: true,      // will cause the event to go back to its
                  revertDuration: 0  //  original position after the drag
              });
  
          });
  </code></pre>
  
  <p>So I have to implement it such that the Div is dynamic so I have added codes that generated it. It generated out correctly but it does not get the jQuery attributes such as the being draggable. Here is javascript codes:</p>
  
  <pre><code>    $(document).ready(function () {
  
          $.ajax({
              type: "POST",
              url: "Default.aspx/getListOfStaff",
              data: {},
              contentType: "application/json",
              dataType: "json",
              success: function (msg) {
                  // Replace the div's content with the page method's return.
                  $("#external-events").html(msg.d);
              }
          });
  
          /* initialize the external events
          -----------------------------------------------------------------*/
  
          $('#external-events div.external-event').each(function () {
  
              // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
              // it doesn't need to have a start or end
              var eventObject = {
                  title: $.trim($(this).text()),
                  id: $(this).data('id')
              };
  
              // store the Event Object in the DOM element so we can get to it later
              $(this).data('eventObject', eventObject);
  
              // make the event draggable using jQuery UI
              $(this).draggable({
                  zIndex: 999,
                  revert: true,      // will cause the event to go back to its
                  revertDuration: 0  //  original position after the drag
              });
  
          });
  </code></pre>
  
  <p>I used firebug and checked the html generated, it is exactly the same. Any ideas?</p>