使用JavaScript创建MDL复选框

Question

I'm working on a to-do list app. User inputs task in a form, then JavaScript adds it to the HTML document.

I'm trying to use the Material Design Lite checkbox component in my list items, but the checkboxes won't render correctly. All other buttons and form inputs render fine. I've done my best to get the JavaScript to copy it exactly, but it seems like no matter what I do I can't get it to appear correctly.

Check out the CodePen showing the problem here .

I coded the first list item into the HTML to show the correct checkbox for reference. Adding subsequent list items through the form will show the incorrect checkbox.

JavaScript code:

    //create list item
    let newLi = document.createElement('li');  
    newLi.classList.add('mdl-list__item');

    //create primary span container
    let toDoContainer = document.createElement('span');
    toDoContainer.classList.add('mdl-list__item-primary-content');

    //create checkbox and attach to primary span container
    let toDoLabel = document.createElement('label');
    toDoLabel.classList.add('mdl-checkbox', 'mdl-js-checkbox', 'mdl-js-ripple-effect');
    toDoLabel.htmlFor = 'list-checkbox-1';
    let checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.id = 'list-checkbox-1';
    checkbox.classList.add('mdl-checkbox__input');
    toDoLabel.appendChild(checkbox);
    toDoContainer.appendChild(toDoLabel);

    //create text and attach to primary span container
    let labelText = document.createTextNode(newToDoText.value);
    toDoContainer.appendChild(labelText);

    //append primary span container container to list item
    newLi.appendChild(toDoContainer);

    //create secondary span container
    let deleteContainer = document.createElement('span');
    deleteContainer.classList.add('mdl-list__item-secondary-action');

    //create delete button and append to secondary span container
    let deleteButton = document.createElement('button');
    deleteButton.classList.add('mdl-button', 'mdl-js-button', 'mdl-button--icon');
    let icon = document.createElement('i');
    let text = document.createTextNode('delete');
    icon.classList.add('material-icons');
    icon.appendChild(text);
    deleteButton.appendChild(icon);
    deleteContainer.appendChild(deleteButton);
    deleteContainer.addEventListener('click', function(e) {
        toDoList.removeChild(deleteButton.parentNode.parentNode);
    });

    //append secondary span container to list item
    newLi.appendChild(deleteContainer);

    //add list item to to-do list
    toDoList.appendChild(newLi);

    //empty form input
    newToDoText.value = '';

What the correct HTML should look like:

<li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
                <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="list-checkbox-2">
                    <input type="checkbox" id="list-checkbox-2" class="mdl-checkbox__input" />
                </label>
                Finish this to-do list app
            </span>
            <span class="mdl-list__item-secondary-action">
                <button class="mdl-button mdl-js-button mdl-button--icon">
                    <i class="material-icons">delete</i>
                </button>
            </span>
 </li>

Anyone have an idea what I'm doing wrong?

MDL guidelines

Answer 1

On every mdl elements that you insert, you should call componentHandler.upgradeElement(insertedElement)

The reason being material manipulates your dom to change into what it is and binds all events when you add material class to the element on initial load. When you append material elements later on, this doesnt happen, unless you explicitly specify to upgrade your added element to a material element.

https://getmdl.io/started/index.html#dynamic

componentHandler.upgradeElement(checkbox)
toDoLabel.appendChild(checkbox);
componentHandler.upgradeElement(toDoLabel)
toDoContainer.appendChild(toDoLabel);

EDIT You can alternatively add a class like "newMdl" on new material elements and then call componentHandler.upgradeElements(newMdlElements)

deleteContainer.classList.add('mdl-list__item-secondary-action', 'newMdl');
let deleteButton = document.createElement('button');
deleteButton.classList.add('mdl-button', 'mdl-js-button', 'mdl-button--icon', 'newMdl');
deleteContainer.appendChild(deleteButton);
newLi.appendChild(deleteContainer);
let mdlElemets = document.querySelectorAll(".newMdl");
componentHandler.upgradeElements(mdlElemets);

https://codepen.io/anon/pen/BbPRwq