Bootstrap Dynamic Dynamic Element - dynamically changes the width

Question

I have 2 progress bars on my page. One of them is a static version of HTML, the other dynamically using jQuery. If I want to change the width in jQuery so that the progress indicator is "progressed", only static works.

The rest instantly becomes 100% without delay.

Here is the code for a better view: https://jsfiddle.net/gezgind/DTcHh/7133/

HTML

<div class="container"> <div id="reportbars"> <div class="progress" style="width:500px;margin-bottom:0px;margin-top:20px;"> <div class="progress-bar" id="tracking" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;transition-duration: 3s;"> <span style="visibility:hidden">xxxx</span> </div> </div> <button id="report_start" type="button" class="btn btn-default">Start</button> </div> 

Js

  $("#report_start").click(function(){ $("#reportbars").append( '<div class="progress" style="width:500px;margin-bottom:0px;margin-top:20px;">' + '<div class="progress-bar" id="tracking1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;transition-duration: 3s;">' + '<span style="visibility:hidden">Tracking 950.325</span>' + '</div></div>' ); $("#tracking").css("width","100%"); $("#tracking1").css("width","100%"); }); 

How can i fix it?

Answer 1

Check this.

new violin

You need to tweak the js code a bit. You do all your work in one go. do it like:

JS Code:

  /* Latest compiled and minified JavaScript included as External Resource */ $("#report_start").click(function(){ $("#reportbars").append('<div class="progress" style="width:500px;margin-bottom:0px;margin-top:20px;">'+ '<div class="progress-bar" id="tracking1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;transition-duration: 3s;">'+ '<span style="visibility:hidden">Laufendes Tracking 950.325</span>'+ '</div></div>'); $("#tracking").css("width","100%"); setTimeout(function(){$("#tracking1").css("width","100%");},10) });