Question

When I click and append a new div call block2, the draggable drag & stop not work?

How to fix it??

DEMO: http://jsfiddle.net/hbGkN/1/

HTML

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

JS

$('#btn').click(function(){
    var $newDiv=$('<div class="block2" style=" width:100px; height:100px; background:green;">I am Block2</div>');
    $( "#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!');
            }

        });

Answer 1

You should try this, because, ‘block2’ class div is not present in dom, So the code will not able to add draggable to it. So, after adding ‘block2’to DOM, you should call the draggable on it. Then It will work as you aspect.

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

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

});

CHECK this DEMO