title: jQuery UI droppable Not Working
body: <p>I am trying to make a form building tool. Everything was working just fine. I was able to drag my first icon and drop it on the main form body, just fine. When I do this, it appends a new div of class panel. I make panel droppable as well, however when I try to drop something on it nothing happens. If I hard code the div in it works fine, however when I append the div it does not. I'm having a lot of trouble figuring this out.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
  &lt;script type="text/javascript" src="jquery-1.6.2.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"&gt;&lt;/script&gt;
  
  &lt;style type="text/css"&gt;
      #toolbox
      {
          width: 100%;
          height: 200px;
          position: fixed;
          top: 0;
          left: 0;
          background-color: #666666;
          z-index: 2;
      }
      .icon
      {
          padding-top: 20px;
          padding-left: 20px;
          text-align: center;
          display: table-cell;
      }
      #formbuilder
      {
          width: 100%;
          position: absolute;
          top: 200px;
          left: 0px;
          bottom: 0px;
          padding-top: 5%;
          background-color: orange;
          opacity: 0.4;
          overflow: visible;
      }
      .panel
      {
          margin: 0 auto;
          margin-bottom: 20px;
          height: 150px;
          width: 150px;
          background-color: blue;
          opacity: 0.4;
      }
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;script type="text/javascript"&gt;
          function formDropHandler(event, ui)
          {
              if(ui.draggable.hasClass("pan"))
              {
                  var form = $("#formbuilder");
                  form.append('&lt;div class="panel ui-droppable"&gt;&lt;/div&gt;');
  
                  $(".panel").droppable({
                      drop: panelDropHandler
                  });
              }
          }
  
          function panelDropHandler(event, ui)
          {
              if(ui.draggable.hasClass("tab")) alert("TRUE");
          }
  
          $(document).ready(function() {
              var icons = $('.icon');
  
              $('.icon').draggable({
                  cursor: 'move',
                  helper: 'clone',
                  revert: true
              });
  
              $("#formbuilder").droppable({
                  drop: formDropHandler
              });
  
              $(".panel").live('mouseover',function(){
                  $(".panel").droppable({
                      drop: panelDropHandler
                  });
              });
          });
      &lt;/script&gt;
  
      &lt;div id="toolbox"&gt;
          &lt;div class="icon pan"&gt;Panel&lt;br /&gt;&lt;img src="panel.png" alt="PANEL.PNG" /&gt;&lt;/div&gt;
          &lt;div class="icon tab"&gt;Table&lt;br /&gt;&lt;img src="table.png" alt="TABLE.PNG" /&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="formbuilder"&gt;
          &lt;div class="panel"&gt;&lt;/div&gt;
          &lt;div class="panel"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>