jquery droppable和draggable无法在for循环中动态创建表

Question

我想在for循环中动态创建表可拖动和可拖动。它不工作。对于静态表，它工作正常。小提琴here

的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 UI库添加到项目中的jQuery后：

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

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