jQuery ~ draggable function not work in append object
<p>When I click and append a new div call block2, the draggable drag &amp; stop not work?</p>

<p>How to fix it??</p>

<p>DEMO: <a href="http://jsfiddle.net/hbGkN/1/" rel="nofollow">http://jsfiddle.net/hbGkN/1/</a></p>

<p>HTML</p>

<pre><code>&lt;div id="btn"&gt;&lt;input name="click" type="button" value="Click" /&gt;&lt;/div&gt;
&lt;div class="block1" style=" width:100px; height:100px; background:orange;"&gt;I am Block1&lt;/div&gt;
</code></pre>

<p>JS</p>

<pre><code>$('#btn').click(function(){
    var $newDiv=$('&lt;div class="block2" style=" width:100px; height:100px; background:green;"&gt;I am Block2&lt;/div&gt;');
    $( "#btn").parent().append($newDiv);

});


$('.block1').draggable({

            drag: function() {
                $('.block1').text('Drag Now!');
            },
            stop: function() {
                $('.block1').text('Stop Now!');
            }

        });



$('.block2').draggable({

            drag: function() {
                $('.block2').text('Drag Now!');
            },
            stop: function() {
                $('.block2').text('Stop Now!');
            }

        });
</code></pre>
