ブートストラップモーダルポップアップ（javascript、jquery）で関数を実行する方法

Question

私は各質問がモーダルで表示されるテストを行いました。同じモーダルで、内部の内容のみが各質問の後に変更されます。結果は同じモーダルでも表示する必要があります。結果を表示するために、progressbar.js（http://kimmobrunfeldt.github.io/progressbar.js/#examples）を使用します。 （モーダルがまだ表示されていない場合）最後の質問は、私は

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

にモーダルコンテンツを変更し、新しいクラスを追加して行われた後

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

：これは私のインデックスファイルにどのように見えるかですモーダル $('#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(); 
}); 

を追加したとき。

私はそれをテストしていませんが、論理は正しいと思われますが、私が見ることのできないコードに何があるかによって異なります。