Question

当我需要动态添加div块时，我有一个Web表单。 div块内有一个可排序的项目表。我正在通过在最后一个div上调用clone（）来添加div和它的子节点，根据需要修复输入（代码因其无关紧要而被接受测试）。并将新克隆的div附加到最后一个div的父级。但是，无论我尝试什么，我都无法让新克隆的div /子表可以像它的预测器那样进行排序。

我已设置following test在jsFiddle上显示问题。

对于那些无法看到jsFiddle的人来说，这里是尝试的相关比特：

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

在没有数据和事件的情况下克隆表（使用事件克隆它意味着要将新表的行分类到旧表中），然后进行表可排序而不是原始div。（为方便起见，您也可以将方法链接起来。）

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

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

您还可以将.appendTo($('div.inner:last').parent())替换为nearly the same result {{3}}（您还有.insertAfter('div.inner:last')，这会根据您使用的代码更改位置。）< / p>

带有可排序表的克隆div允许拖动但不能排序

1 个答案: