动态生成的DIV缺少类属性

Question

我创建了一个表，并通过生成DIV来动态填充此表。我希望我的表元素可以拖动，所以我使用Jquery.Ui，这需要使用正确的名称指定类，以便可以拖动它。但是我发现只有第一个DIV有这个类而其他生成的类没有，这意味着它们不能被拖动。

我的代码。

while ( $row = mysqli_fetch_array ( $result ) ) {
                    echo '<div id="Cell" class="ui-widget-content">';
                    echo '<input type="checkbox" name="tbl" id="tblst"   value="' . $row [0] . '"  />';
                    echo '<p>' . $row [0] . '</p>';
                    echo '</div>';
                }

通过检查元素输出。

如何解决这个问题，以便生成的所有元素都可以拖动？

Answer 1

您的JS按ID

定位元素

$('#Cell').draggable()

因此，假设只有一个元素被命名为#Cell。删除Id Cell，因为它的HTML无效，并以这种方式回显：

echo '<div class="draggable-cell ui-widget-content">';

将JS更改为目标类：

$('.draggable-cell').draggable()

现在它将针对多个元素。

Answer 2

我相信你希望能够在某个时刻跟踪细胞，所以请试试这个：

<div id="FirstRow" class="Row"></div>

使用此javascript：

function createCells() {
    var counter = 0;
    while ($row = mysqli_fetch_array($result)) {
        $("#FirstRow").append('<div id="cell_' + counter + '" class="ui-widget-content"><p>' + $row[0] + '</p></div>');
        counter++;
    }
    $("#FirstRow").children().draggable();
}
$(function () {
    createCells();
});

JSFiddle Link to code