google / google/material-design-lite
Dynamically created checkboxes do not work
- Dominant language
- HTML
- Stars
- 32.2k
- Forks
- 4.9k
- PR merge metrics
- No merged PRs in 30d
Description
> 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](https://hastebin.com/zuhotusevo.html).
EDIT: And here is [a codepen](https://codepen.io/DougBeney/pen/zQwvvo).
Here is the main snippet of code in question:
```javascript
var ITEM_COUNT = 0;
function addItem() {
var newItem = $("
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:
```javascript
componentHandler.upgradeElement( newItem.get(0) );
```
Contributor guide
Assessment
This issue has not been assessed yet.