javascript - Material-Design-lite 中的 componentHandler.upgradeDom() 带有 for 循环

Question

我正在使用 Material Design lite 并使用 for 循环插入元素。

var insertClass ='';
var classlist = document.querySelector('.classList');
for (var i = 0; i < 5; i++) {
    insertClass += '<div class="eachClass">' +
                      '<p>'+ i +'</p>' +
                     '<button id="demo-menu-lower-right" class="mdl-button mdl-js-button mdl-button--icon">'+
                       '<i class="material-icons">more_vert</i>'+
                     '</button>' +
                     '<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-right">' +
                       '<li class="mdl-menu__item deleteClass">Delete</li>' +
                       '<li class="mdl-menu__item editClass">Edit</li>' +
                     '</ul>' +
                  '</div>';
}
classlist.innerHTML = insertClass;
componentHandler.upgradeAllRegistered('MaterialMenu', 'mdl-js-menu');

componentHandler.upgradeAllRegistered() 函数根本不起作用，但是当我使用 upgradeDom() 时，它仅适用于第一个元素。

Answer 1

在您提供的示例中，您最终将得到具有相同 id 的多个按钮和具有相同 for 的多个 ul 菜单。这可能可以解释为什么您似乎只获得一个菜单，因为 Material Design lite 使用 id 和 for 将按钮和菜单绑定(bind)在一起。尝试用以下内容重写您的示例:

'<button id="demo-menu-lower-right_' + i + '" class="mdl-button mdl-js-button mdl-button--icon">'+
   '<i class="material-icons">more_vert</i>'+
'</button>' +
'<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-right_' + i + '">' +
   '<li class="mdl-menu__item deleteClass">Delete</li>' +
   '<li class="mdl-menu__item editClass">Edit</li>' +
 '</ul>'

...这将为每个按钮和菜单提供唯一的 ID 或 for。