jQuery Droppable和Draggable在for循环中动态创建的表上不起作用

Question

我试图使在for循环中可拖放创建的表动态创建。 它不起作用。 对于静态表，它可以正常工作。 在这里摆弄

Javascript：

$(document).ready(function () {
    $("#button1").click(function () {
        for (var j = 1; j < 4; j++) {
            var table = document.createElement("table");
            var tbody = document.createElement("tbody");
            for (var i = 1; i < 5; i++) {
                var tr = document.createElement("tr");
                var td1 = document.createElement("td");
                var td2 = document.createElement("td");

                var text1 = document.createTextNode("Text" + j + "-" + 1 + i);
                var text2 = document.createTextNode("Text" + j + "-" + 2 + i);

                td1.appendChild(text1);
                td2.appendChild(text2);
                tr.appendChild(td1);

                tr.appendChild(td2);

                tbody.appendChild(tr);
                table.appendChild(tbody);

                //var id = "a" + j + "." + i;
                //tr.attr({"id",id}).appendTo(table);
                // tr.setAttribute("id", id);
            }

            document.getElementById("tb").appendChild(table);
            table.setAttribute("id", "t" + j);
            tbody.setAttribute("id", "tb" + j);
            $("#" + "tb" + j).sortable({
                items: "> tr:not(:first)",
                appendTo: "parent",
                helper: "clone"
            }).disableSelection();
        }
    });
});

HTML：

<button id="button1">
    button1
</button>
<div id="tb">
</div>

Answer 1

在jQuery之后将jQuery UI库添加到您的项目中：

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

之后，您的代码可以正常工作。 这是一个JS Bin 。