MDL animations stop working on copied <fieldset>

Question

I am having an issue when cloning a section of my form (with jQuery).

The code below copies a 'fieldset', applies unique id's and for's, then appends the copy within the original 'fieldset'.

Although the copying works, all animations of the 'MDL'framework break on the copied 'fieldset'.

The code I am using is shown below:

//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 + ')');
    $()
});

I was guessing a problem be the JavaScript loading?

Answer 1

I ended up finding the answer myself. The problem was that the framework needed to be reloaded. To do this you can use the line:

componentHandler.upgradeAllRegistered();

Or, if you would like to target a specific element you can use:

componentHandler.upgradeElement(button);

---

The full documentation is here https://getmdl.io/started/#dynamic