Bootstrap-Fortschrittsbalken-Assistent stecken geblieben

Question

Wenn Sie in den Schritten auf Fortfahren klicken, dann in Schritt 5 auf Zurück und dann auf Fortfahren (in Schritt 4) klicken, wird der Fortschrittsbalken nicht vorwärts verschoben. Es scheint zu hängen. Irgendeine Idee, warum das passiert?

http://jsfiddle.net/hmwqkpjf/8/

<div class="tab-pane fade" id="step4"> 
    <div class="well"> 
     STEP4 
    </div> 
    <a data-step="3" data-toggle="tab" href="#step3" class="btn btn-default pull-left">Previous Step</a> 
    <a class="btn btn-default next" href="#">Continue</a> 
    </div> 

<div class="tab-pane fade" id="step5"> 
    <div class="well"> 
     STEP5 
    </div> 
    <a data-step="4" data-toggle="tab" href="#step4" class="btn btn-default pull-left">Previous Step</a> 
    <a class="btn btn-success first" href="#">Start over</a> 
    </div> 

JS:

$('.next').click(function(){ 

    var nextId = $(this).parents('.tab-pane').next().attr("id"); 
    $('[href=#'+nextId+']').tab('show'); 
    return false; 

}) 

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 

    //update progress 
    var step = $(e.target).data('step'); 
    var percent = (parseInt(step)/5) * 100; 

    $('.progress-bar').css({width: percent + '%'}); 
    $('.progress-bar').text("Step " + step + " of 5"); 

    //e.relatedTarget // previous tab 

}) 

$('.first').click(function(){ 

    $('#myWizard a:first').tab('show') 

}) 

Answer 1

Dies könnte darauf zurückzuführen sein, mehrere 'a' Tags durch Daten-toggle zu gleichen Behälter zu haben.

Machen Sie eine ähnliche Implementierung für den vorherigen Klick, dann scheint alles gut zu sein.

// Previous button click event 
$('.prev').click(function() { 
    var prevId = $(this).parents('.tab-pane').prev().attr('id'); 
    $('a[href=#' + prevId + ']').click(); 
}); 

Hier ist die aktualisierte Geige - http://jsfiddle.net/hmwqkpjf/12/