Question

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

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

虽然复制有效，但“MDL”框架的所有动画都会在复制的“字段集”上中断。

我使用的代码如下所示：

//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>

2 个答案: