Element created with innerHTML is not responding to JavaScript
<p>I have a div which is created using innerHTML using javascript in a function. This div is supposed to be draggable. However it does not seem to work when innerHTML is used? </p>

<p>Is it possible to drag a div element if its created using the innerHTML method?</p>

<p>ah sorry sorry my bad. This is how the dragging is done. I use event listeners to detect mousedown and mouseup.</p>

<p>the shields array is all the elements that contains the class shield.</p>

<p>the elements array in the mouseup listener function is an array of the divs for dragging and dropping.</p>

<p>each element in the elements array is a new draggable</p>

<pre><code>function draggable(name, left, top, width, height, optional) {
        this.div = name;
        this.left = left;
        this.top = top;
        this.width = width;
        this.height = height;
        this.optional = optional;
        this.cwidth = width;

        if (optional) {
            this.dleft = left;
            this.dtop = top;
            this.cwidth = 70;
        }
    }

shields[i].addEventListener("mousedown", function (evt) {
                var e = event || evt;
                var div = this.parentNode;
                dragging[div.id] = true;
                offsetX[div.id] = e.clientX - parseInt(div.style.left);
                offsetY[div.id] = e.clientY - parseInt(div.style.top);
                //$("error").innerHTML = div.id + ":" + div.style.left + ":" + offsetX[div.id] + ":" + div.style.top + ":" + offsetY[div.id];
                this.style.cursor = "move";
                div.style.zIndex = 999;
                e.preventDefault();
            }, false);

            shields[i].addEventListener("mouseup", function (evt) {
                var e = event || evt;
                var div = this.parentNode;
                dragging[div.id] = false;
                elements[div.id].left = parseInt(div.style.left);
                elements[div.id].top = parseInt(div.style.top);
                this.style.cursor = "pointer";
                div.style.zIndex = 1;
                reposition();


            }, false);
</code></pre>

<p>An example of the div that is to be dragged is as below</p>

<pre><code>&lt;div id="phone" class="draggable"&gt;
Phone: &lt;input type="text" id="phone_field" maxlength="8" /&gt;
&lt;div class="shield optional"&gt;Phone&lt;/div&gt;
&lt;/div&gt;
</code></pre>
