addEventListener funktioniert nicht, wenn innerhalb addClass verwendet

Question

ich folgende HTML geschrieben haben, Material Design Lite für einen Fortschrittsbalken mit:

<div class="mdl-grid"> 
    <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-phone"> 
     <div id="stepProgress" class="mdl-progress mdl-js-progress"></div> 
    </div> 
</div> 
<div class="mdl-grid"> 
    <div id="step1-title" class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone steps"> 
     <h5 class="text-center">Step 1</h5> 
    </div> 
    <div id="step2-title" class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone steps"> 
     <h5 class="text-center">Step 2</h5> 
    </div> 
    <div id="step3-title" class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone steps"> 
     <h5 class="text-center">Step 3</h5> 
    </div> 
</div> 

<div id="firstnext" class="box-style">Next</div> 

Tha Layout sieht gut aus. Wenn eine Taste gedrückt wird der Hintergrund auf jedem der Schritte ändert sich, um anzuzeigen, welche der Benutzer Schritt in ist, die folgende jQuery verwenden:

jQuery('#step1-title').addClass('box-active'); 
jQuery('#firstnext,#step2-title').click(function(){ 

    jQuery('#step1').hide(); 
    jQuery('#step2').show(); 
    jQuery('#step3').hide(); 
    jQuery('#step1-title').removeClass('box-active'); 
    jQuery('#step2-title').addClass('box-active'); 
    jQuery('#step3-title').removeClass('box-active'); 

}); 

ich jetzt versuchen, den Fortschrittsbalken zu aktualisieren, aber die folgende ist nicht bei der Arbeit der nächste Taste gedrückt wird:

document.querySelector('#stepProgress').addEventListener('mdl-componentupgraded', function() { 
this.MaterialProgress.setProgress(33); 
}); 

(aus dem Google-Website hier: https://getmdl.io/components/#loading-section)

ich folgende jsFiddle erstellt haben https://jsfiddle.net/storm/7a84vqz7/

Answer 1

Der Beispielcode auf dem angegebenen Link reagiert auf das Ereignis mdl-componentupgraded, vorausgesetzt, dass ein Hintergrundprozess die Komponente aktualisiert. Obwohl ich die zugrunde liegenden Funktionen nicht kenne, scheint es, dass du den Fortschritt direkt einstellen kannst über:

document.querySelector('#stepProgress').MaterialProgress.setProgress(33);