jQuery ~ 可拖动函数在追加对象中不起作用

Question

当我单击并附加一个新的 div 调用 block2 时，可拖动的拖动和停止不起作用？

如何解决？

演示: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

你应该尝试这个，因为 'block2' 类 div 不存在于 dom 中，因此代码将无法向其添加可拖动的内容。因此，在将“block2”添加到 DOM 后，您应该在其上调用可拖动功能。然后它就会按照你的方式工作。

$('#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!');
         }
    });

});

检查此 DEMO