<div data-role="content">

      <div id="droppable" class="product_canvas"></div>

      <div class="customization_selection">

<div class="ui-grid-a">

  <div class="ui-block-a" id="first_column"></div>

  <div class="ui-block-b" id="second_column"></div>

</div>

      </div>

</div>

When I load an image and set the class attribute, the js method for the draggableImage works fine.  It looks like this when all is well in the world:

<div class="ui-block-a" id="first_column">

      <ul>

            <li><div class="draggableImage"><img src="images/image1.png"/></div></li>

      </ul>

</div>

When I write a simple js function to do the exact thing dynamically when a button is clicked, the images load but the draggable feature defined in the class="draggableImage" disappears.  In other words, I can no longer drag and drop my image.

Here's my simple onclick function:

function emblem()

{

      var result = "<ul>" +

                              "<li><div class=draggableImage><img src='images/image1.png'/></div></li>" +

     "</ul>";

      document.getElementByID("first_column").innerHTML = result;

}

Any idea on why this is happening?