使用 JavaScript 创建 MDL 复选框

Question

我正在开发一个待办事项列表应用程序。用户在表单中输入任务，然后 JavaScript 将其添加到 HTML 文档中。

我正在尝试在列表项中使用 Material Design Lite 复选框组件，但复选框无法正确呈现。所有其他按钮和表单输入都可以正常呈现。我已尽力让 JavaScript 准确地复制它，但似乎无论我做什么，我都无法让它正确显示。

查看显示问题的 CodePen here。

我将第一个列表项编码到 HTML 中以显示正确的复选框以供参考。通过表单添加后续列表项将显示不正确的复选框。

JavaScript 代码：

    //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 = '';

正确的 HTML 应该是什么样子：

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

有人知道我做错了什么吗？

MDL guidelines

Answer 1

在您插入的每个 mdl 元素上，您应该调用 componentHandler.upgradeElement(insertedElement)

当您在初始加载时将材质类添加到元素时，材质会操纵您的 dom 更改为它的样子并绑定所有事件的原因。当您稍后添加材质元素时，这不会发生，除非您明确指定将添加的元素升级为材质元素。

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

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

编辑 您也可以在新材料元素上添加一个类似“newMdl”的类，然后调用 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