與排序表克隆格允許拖動但不排序

Question

我在當我需要動態添加的div塊Web表單。在div塊內生活着一個可排序的物品表格。我通過在最後一個div上調用clone（）來完成div的添加，並且它是子節點，根據需要修改輸入（自從測試失敗以後就被承認的代碼）。並將新克隆的div附加到最後一個div的父級。然而，無論我嘗試什麼，我都無法獲得新克隆的div w/child表，可以像它的predicessor那樣排序。

我已經安裝了following test顯示在的jsfiddle問題。

而對於那些無法看到的jsfiddle，這裏是relavent位嘗試：

的HTML部分：

<div> 
    <div class="inner"> 
     <input name="one" value="something" /> 
     <table> 
      <tbody> 
       <tr> 
        <td>First</td> 
        <td> 
         <input name="row1" value="1" /> 
        </td> 
       </tr> 
       <tr> 
        <td>Second</td> 
        <td> 
         <input name="row2" value="2" /> 
        </td> 
       </tr> 
       <tr> 
        <td>Third</td> 
        <td> 
         <input name="row3" value="3" /> 
        </td> 
       </tr> 
       <tr> 
        <td>Fourth</td> 
        <td> 
         <input name="row4" value="4" /> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
    <br/> 
</div> 
<input type="button" id="button" value="Add" /> 

而jQuery的部分

$(document).ready(function() { 
    $('div.inner table tbody').sortable({ 
     stop: function() { /* Some code to reset the row numbers */ 
     } 
    }); 

    $('#button').click(function(event) { 
     var newInnerDiv = $('div.inner:last').clone(true,true); 

     // clean up the inputs 

     // Append the new Item Type to the parent of the existing one 
     $(newInnerDiv).appendTo($('div.inner:last').parent()); 

     // renumber inputs 

     // Even if I make this re-sortable, the new table doesn't work 
     $(newInnerDiv).sortable(); 
    }); 
}); 

有一些如何重新應用新克隆表的排序？我們使用jQuery 1.7.1和jQuery UI 1.8.13。

Answer 1

克隆表沒有數據和事件（與事件克隆這意味着你的新表中的行要被分類到老表），然後進行排序表代替了原來的股利。 （你也可以連接你的便利方法。）

var newInnerDiv = $('div.inner:last').clone(false,false) 
     .appendTo($('div.inner:last').parent()) 
     .find('tbody').sortable(); 

http://jsfiddle.net/mblase75/2d6G9/

您還可以.insertAfter('div.inner:last')取代.appendTo($('div.inner:last').parent())爲nearly the same result（你在那裏有一個<br>爲好，這改變了位置，這取決於你的代碼使用）。