MDL 动画停止处理复制的 <fieldset>

Question

我在克隆表单的一部分时遇到问题（jQuery）。

下面的代码复制 'fieldset'，应用唯一 ID 和 for，然后将副本附加到原始 'fieldset'。

尽管复制有效，但“MDL”框架的所有动画都会在复制的 'fieldset' 上中断。

我使用的代码如下：

//When add section is pressed
$('#add-section').click(function () {
    // add 2 vars to count clicks per page

    // get the fieldset's children that user is on, and clone it
    var $fieldsetCopy = $('form>:nth-child(' + pageNumber + ')').clone();

    // add '-2' to all id's of the cloned fieldset
    $fieldsetCopy.find("*[id]").each(function () {
        $(this).attr("id", $(this).attr("id") + "-2");
    });

    // add '-2' to all for's of the cloned fieldset
    $fieldsetCopy.find("*[for]").each(function () {
        $(this).attr("for", $(this).attr("for") + "-2");
    });

    // remove the first p element of the clone
    $fieldsetCopy.find("p").first().remove();

    // add the cloned fieldset within the original
    $fieldsetCopy.appendTo('form>:nth-child(' + pageNumber + ')');
    $()
});

我猜 JavaScript 加载有问题？

Answer 1

最后我自己找到了答案。问题是需要重新加载框架。为此，您可以使用以下行：

componentHandler.upgradeAllRegistered();

或者，如果您想定位特定元素，您可以使用：

componentHandler.upgradeElement(button);

完整文档在这里https://getmdl.io/started/#dynamic

Answer 2

这是另一个例子（没有jQuery）。也许它会有所帮助。只需手动重建 DOM。

<script type="text/javascript">

document.getElementById("addText").onclick = function () {
    var form = document.getElementById("container_layout_text");

    var newDiv = document.createElement("div");
    newDiv.className = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label desc_value";

    var newInput = document.createElement("input");
    newInput.className = "mdl-textfield__input";
    newInput.type = "text";

    var newLabel = document.createElement("label");
    newLabel.className = "mdl-textfield__label";
    newLabel.textContent = "kkk?";

    newDiv.appendChild(newInput);
    newDiv.appendChild(newLabel);

    componentHandler.upgradeElement(newDiv);
    form.appendChild(newDiv);
}

MDL 动画停止处理复制的 <fieldset>

MDL animations stop working on copied <fieldset>

javascript

jquery

material-design-lite