componentHandler.upgradedom()在材料设计中使用，用于循环

Question

我正在使用材料设计精简版，并插入循环的元素。

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 的多个按钮，并且具有相同的多个ul菜单，for 。这可能会解释为什么您似乎只能获得一个菜单，因为 和 for 被材料设计用来将按钮和菜单绑定在一起。尝试使用以下方式重写您的示例：

'<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或。