componentHandler.upgradeDom() dans material-design-lite avec pour boucle

Question

J'utilise des éléments de conception matérielle et j'insère des éléments avec une boucle.

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'); 

La fonction componentHandler.upgradeAllRegistered() ne fonctionne pas du tout, mais quand je utilise upgradeDom() il ne fonctionnera que sur le premier élément.

Answer 1

Dans l'exemple que vous avez fourni, vous allez finir avec plusieurs boutons avec le même id et plusieurs menus ul avec le même pour. Cela pourrait expliquer pourquoi vous semblez avoir seulement un menu que le id et pour sont utilisés par la conception matérielle Lite pour lier les boutons et les menus ensemble. Essayez de réécrire votre exemple avec:

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

... qui donnera chaque bouton et le menu un identifiant unique ou pour.