как запустить функцию при загрузке модального всплывающего окна (javascript, jquery)

Question

Я сделал тест, где каждый вопрос отображается в модальном виде. Тот же модальный, только содержимое внутри изменяется после каждого вопроса. Результат должен также отображаться в том же модальном виде. Чтобы показать результат, я использую progressbar.js (http://kimmobrunfeldt.github.io/progressbar.js/#examples). Вот как это выглядит в моем файле индекса:

function result() { 

    $('.progress1').css('display', 'block'); 

    var startColor = '#FC5B3F'; 
    var endColor = '#6FD57F'; 

    var circle = new ProgressBar.Circle('.progress1', { 
     color: startColor, 
     easing: 'easeIn', 
     strokeWidth: 8, 
     trailWidth: 0, 
     duration: 2000, 
     text: { 
      value: '0', 
      style: { 
       color: '#000' 
      } 
     }, 

     step: function(state, bar) { 
      bar.setText((bar.value() * 100).toFixed(0)); 
     } 
    }); 


    function rangeToPercent(number, min, max){ 
     return ((number - min)/(max - min)); 
    } 
    var value = rangeToPercent(counterAnswer, 0, counterQ) 





    // This will determine the circumference of the circle 
    circle.animate(value, { 
     from: {color: startColor}, 
     to: {color: endColor}, 
     step: function(state, circle, bar) { 
      circle.path.setAttribute('stroke', state.color); 
      console.log(circle); 
      circle.setText((circle.value() * 100).toFixed(0)); 
     } 
    }); 
} 

После того, как последний вопрос делается (если модальный пока не видно) меняю модальное содержание в

<h2 style='text-align: center; font-weight: bold;'>Your score is:</h3><br> 
<div style='margin: auto;' class='progress1' value='0'></div> 

и добавить новый класс модальный $('#myModalTest').addClass('result');. В моем сценарии у меня есть: $(".result").on('shown.bs.modal', function() { result(); });

Но это не работает. Я попытался поставить result(); в setTimeOut (и запустил его без $(".result").on('shown.bs.modal', function() {result();});), но затем он запускается 4 раза, создавая 4 круга (я понятия не имею, почему). Пожалуйста, помогите.

Answer 1

Вы загружаете модальный контент динамически?

Мы имели эту проблему и получили его работы с помощью добавления этого в конце модального содержания:

(function() { 
    // Your code here 
})(); 

Когда содержимое загружается модальным он будет работать JavaScript.

Answer 2

Прочитав ваш вопрос еще раз, я думаю, что код для добавления показанного события в модальный выполняется до того, как вы добавите к нему класс результатов.

Так загружает страницы и работает (предположительно в теге сценария в конце страницы):

$(".result").on('shown.bs.modal', function() { 
    result(); 
}); 

Селектор $ («результат»). не найдет ничего в этой точке поэтому ваше показанное событие не связано ни с чем.

Вы затем добавить класс результат к модальным

$('#myModalTest').addClass('result'); 

и запустить модальный но модальный не событие проводной вверх.

Я думаю вам необходимо либо сделать это в первую очередь:

$("#myModalTest").on('shown.bs.modal', function() { 
    result(); 
}); 

потому, почему это результат класс нужен? Или выполните:

$('#myModalTest').addClass('result').on('shown.bs.modal', function() { 
    result(); 
}); 

, когда вы добавляете класс для добавления мероприятия.

Я ничего не тестировал, но логика кажется правильной, в зависимости от того, что находится в коде, который я не вижу.