1

当我需要动态添加 div 块时，我有一个 Web 表单。在 div 块内有一个可排序的项目表。我正在通过在最后一个 div 上调用 clone() 来添加 div 及其子项，根据需要修复输入（代码承认，因为它与测试无关）。并将新克隆的 div 附加到最后一个 div 的父级。但是，无论我尝试什么，我都无法让新克隆的带有子表的 div 像它的前身一样可排序。

我已经设置了以下测试，显示了 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。

4

1 回答 1

2

克隆没有数据和事件的表（用事件克隆它意味着新表的行要排序到旧表中），然后使表可排序而不是原始 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())为.insertAfter('div.inner:last')几乎相同的结果（您也有一个<br>，它会根据您使用的代码改变位置）。

于 2013-04-05T14:18:55.227 回答