动态生成的 DIV 缺少类属性答案

【问题标题】：Dynamically generated DIVs missing class attribute动态生成的 DIV 缺少类属性
【发布时间】：2015-03-25 14:52:10
【问题描述】：

我创建了一个表，并通过生成DIVs 动态填充此表。我希望我的表格元素是可拖动的，所以我使用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>';
                }

通过检查元素输出。

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

【问题讨论】：

你调用draggable()的javascript是什么？我敢打赌是$('#Cell').draggable()，对吧？
是的，因为我想拖动它的Cell。

标签： javascript jquery html css jquery-ui

【解决方案1】：

您的 JS 按 ID 定位元素

$('#Cell').draggable()

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

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

将JS改为目标类：

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

现在它将针对多个元素。

【讨论】：

我使用的是Class ="Cell"，但可拖动元素也需要指定类。您的建议无效。
非常感谢您的时间和示例。

【解决方案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

【讨论】：