javascript - MDL 动画停止处理复制的

Question

我在克隆表单的一部分(使用 jQuery)时遇到问题。

下面的代码复制“字段集”，应用唯一的 ID 和 for，然后将副本附加到原始“字段集”中。

尽管复制有效，但“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