Question

我有一个jQuery UI代码，允许现有的框可以拖动。但是，当我附加一个附加框时，这些框不可拖动。这是一个JSFiddle：http://jsfiddle.net/MJKhq/4/ （单击我按钮会在文档中添加另一个框，但该框不像第一个框那样可拖动）。这里也是一个代码示例，因为它要求我：

$(function()
{
    $( "#draggable" ).draggable();
});

function makenew()
{
    $("body").append('<div id="draggable" class="ui-widget-content"> <p>Drag me around</p></div>');
}

Answer 1

每个dom元素必须具有唯一的id才能处理，或者父级必须必须是不同的。将其附加到dom绑定事件后，您不能使用相同的ID。你可以这样定义它。

<script>
function _bindEvents()
{
    $(".ui-widget-content" ).draggable();
}

$(function(){
    _bindEvents();
});

function makenew()
{
    $("body").append('<div id="draggable" class="ui-widget-content"> <p>Drag me around</p></div>');
    _bindEvents();
}
</script>

Answer 2

在DOM树中应该只有一个具有相同id的元素。通过添加一个新框，您将获得两个具有相同ID的元素。尝试使用类。

Answer 3

请记住id必须是唯一的，您不能在同一页面上使用相同的id多个元素，在这种情况下，您可以使用class代替id ，像

function makenew() {
    var div=$('<div class="draggable ui-widget-content"><p>Drag me around</p></div>');  
    $("body").append(div);
    $(div).draggable();
}

Example

jQuery附加框不可拖动

3 个答案: