addEventListener не работает при использовании в addClass

Question

Я написал следующий HTML, используя материал Design Lite для панели прогресса:

<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 макет выглядит великолепно. При нажатии кнопки она меняет фон на каждом из этапов, чтобы указать, какой шаг пользователь находится, с помощью следующей JQuery:

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

}); 

Я сейчас пытаюсь обновить прогресс бар, но ниже не работающие при нажатии следующей кнопки:

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

(с сайта Google здесь: https://getmdl.io/components/#loading-section)

Я создал следующий jsFiddle https://jsfiddle.net/storm/7a84vqz7/

Answer 1

Пример кода на предоставленной ссылке, реагирует на событие mdl-componentupgraded, предполагая, что какой-то фоновый процесс обновляет компонент. Хотя я не знаю основную работу, кажется, что вы можете установить настройку прогресса напрямую через:

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