Question

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

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

签出显示问题here的CodePen。

我将第一个列表项编码到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

使用JavaScript创建MDL复选框

1 个答案: