javascript - jQuery附加框不可拖动

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 才能使用，或者 parent 必须不同。您不能使用相同的 id，在将其附加到其上的 dom 绑定事件后更多。你可以这样定义它。

<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();
}

例子。