Dynamically created checkboxes do not work

[DougBeney]

What MDL Version are you using? (please be specific, e.g. major.minor.patch)

1.3.0

What browser(s) is this bug affecting (including version)?

• Firefox 66.0.5
• Chrome 74.0.3729.131

What OS (and version) are you using?

Arch Linux, kernel 4.19.42.

What are the steps to reproduce the bug? Can you create a plunker/codepen/jsfiddle which reproduces it?

Here is the full code.

EDIT: And here is a codepen.

Here is the main snippet of code in question:

    var ITEM_COUNT = 0;

    function addItem() {
        var newItem = $("<div>");
        newItem.html($("#checkbox-template").html());

        newItem.find("#podcast-checkbox-container").attr("for", "the-item-" + ITEM_COUNT);
        newItem.find("#podcast-checkbox").attr("id", "the-item-" + ITEM_COUNT);

        newItem.appendTo("#my-list");
        componentHandler.upgradeAllRegistered();


        ITEM_COUNT++;
    }

What is the expected behavior?

Checkboxes to be selectable.

What is the actual behavior?

They are not.

Any other information you believe would be useful?

I've also tried adding this snippet before and after the newItem.appendTo line:

componentHandler.upgradeElement( newItem.get(0) );

[Mashiane]

Try componentHandler.upgradeDom();

[DougBeney]

I do remember trying that without success.

I ended up migrating to Materialize as I believe this is very much a bug.

[Akshat162001]

var ITEM_COUNT = 0;

function addItem() { var newItem = $("

"); newItem.html($("#checkbox-template").html());

// Updated variable names for clarity
var checkboxContainer = newItem.find("#podcast-checkbox-container");
var checkbox = newItem.find("#podcast-checkbox");

// Generate unique IDs for checkbox and label
var checkboxId = "the-item-" + ITEM_COUNT;
checkboxContainer.attr("for", checkboxId);
checkbox.attr("id", checkboxId);

newItem.appendTo("#my-list");

// Reapply MDL component upgrades
componentHandler.upgradeAllRegistered();

ITEM_COUNT++;

} try this code i have made some chnages in it