当我单击并附加一个新的 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!');
}
});
最佳答案
你应该尝试这个,因为 '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
关于jQuery ~ 可拖动函数在追加对象中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13012092/