wie Funktion auf Bootstrap modalen Pop-up (javascript, jquery) ausführen

Question

Ich habe einen Test gemacht, wo jede Frage in einem modalen angezeigt wird. Das gleiche Modal, nur der Inhalt im Inneren wird nach jeder Frage geändert. Das Ergebnis muss auch im selben Modal angezeigt werden. Um das Ergebnis anzuzeigen, verwende ich progressbar.js (http://kimmobrunfeldt.github.io/progressbar.js/#examples). Dies ist, wie es in meiner Indexdatei aussieht:

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

Nachdem die letzte Frage erfolgt (wenn die modale noch nicht sichtbar ist) Ich modalen Inhalt

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

und fügen neue Klasse ändern das Modal $('#myModalTest').addClass('result');. In meinem Skript habe ich: $(".result").on('shown.bs.modal', function() { result(); });

Aber das funktioniert nicht. Ich habe versucht, result(); in setTimeOut (und führen Sie es ohne $(".result").on('shown.bs.modal', function() {result();});), aber dann läuft es 4 Mal erstellen 4 Kreise (ich habe keine Ahnung, warum). Bitte helfen.

Answer 1

Laden Sie den modalen Inhalt dynamisch?

Wir hatten dieses Problem und haben es am Ende des modalen Inhalt mithilfe Hinzufügen dieser Arbeit:

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

Wenn der Inhalt durch die modal geladen ist, wird es das Javascript ausgeführt werden.

Answer 2

Nachdem ich Ihre Frage erneut gelesen habe, denke ich, dass der Code zum Hinzufügen des angezeigten Ereignisses zum Modal ausgeführt wird, bevor Sie die Ergebnisklasse hinzufügen.

So Seite geladen und läuft (vermutlich in einem Script-Tag am Ende der Seite?):

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

Der Wähler $ ("Ergebnis.") wird nichts an dieser Stelle finden Ihr gezeigtes Ereignis ist also an nichts gebunden.

Sie dann die Klasse Ergebnis zum modalen

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

und feuern die modale hinzufügen, aber die modale verdrahtet das Ereignis nicht haben.

ich denken Sie entweder diese in erster Linie müssen tun:

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

denn warum das Ergebnis ist Klasse benötigt? Oder:

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

Wenn Sie die Klasse hinzufügen, um das Ereignis hinzuzufügen.

Ich habe keine davon getestet, aber die Logik scheint richtig, je nachdem, was im Code ich nicht sehen kann.