http://jsbin.com/IZodOSU/1/edit
所有具有拖动类的 div 都应该是可拖动的,但是当附加一个 div 时,它就不可拖动了。谁能帮我解决这个问题吗?
HTML
<script src="http://threedubmedia.com/inc/js/jquery-1.7.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag.live-2.2.js"></script>
<button id="divgen">Gen Div</button>
<div class="container">
<div class="drag" style="left:20px;"></div>
<div class="drag" style="left:100px;"></div>
<div class="drag" style="left:180px;"></div>
</div>
CSS
.drag {
position: absolute;
border: 1px solid #89B;
background: #BCE;
height: 58px;
width: 58px;
cursor: move;
top: 120px;
}
JS/JQuery
jQuery(function($){
$('.drag').drag(function( ev, dd ){
$( this ).css({
top: dd.offsetY,
left: dd.offsetX
});
});
$("#divgen").click(function() {
$("div.container").append('<div id="whatever" class="drag">my div</div>');
});
});
最佳答案
尝试以下操作。由于 DIV 是动态创建的,因此您必须使用委派。
$('.container').on('drag','.drag',(function( ev, dd ){
$( this ).css({
top: dd.offsetY,
left: dd.offsetX
});
}));
关于javascript - 无法拖动动态附加的 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18545604/