Add progress bar dynamicaly on different position in jplayer

Question

I am using jplayer for a list of items to play one by one. I am trying to put progress bar near to the title dynamically. Progress bar is not working when I add dynamically.

please help.

playlist={
images : ['id-image1','id-image2'],
files  : ['01.mp3','02.mp3'],
currentitem : 0,
createSeekbar : function(divid){
 $('.jp-progress').remove();
   var progressbar,seekbar,playbar;
            progressbar= $('<div/>',{
            "class" : "jp-progress"
                       }).insertAfter("#"+divid);
                seekbar= $('<div/>',{
                                "class" : "jp-seek-bar"
                       }).appendTo(progressbar);                           
                       playbar= $('<div/>',{
                                "class" : "jp-play-bar"
                       }).appendTo(seekbar);              
            }
$("#jquery_jplayer").jPlayer({
    ready: function () {           
       playlist.createSeekbar(playlist.images[playlist.currentitem]);            
      $(this).jPlayer("setMedia", {
        title: "title",
        mp3: "files/"+playlist.files[playlist.currentitem],

      });           
    },
    ended : function(e){                     
                    playlist.movetoNextItem(); 
                    playlist.createSeekbar(divid);              
                    $(this).jPlayer("setMedia", {
                    title: "some titles",
                    mp3: "files/"+playlist.files[playlist.currentitem],                        
                    }).jPlayer("play");  

         },
        swfPath: "/jplayer",
        supplied: "mp3" 
  });

Answer 1

Call the cssSelector method on your createSeekbar function after append of progress bar will solve your issue.

  createSeekbar : function(divid){
                  $('.jp-progress').remove();
                  var progressbar,seekbar,playbar;
                  progressbar= $('<div/>',{
                  "class" : "jp-progress"
                   }).insertAfter("#"+divid);
                  seekbar= $('<div/>',{
                            "class" : "jp-seek-bar"
                   }).appendTo(progressbar);                           
                   playbar= $('<div/>',{
                            "class" : "jp-play-bar"
                   }).appendTo(seekbar);  

             //Additional code appended here
            //..............................................
           $("#jquery_jplayer").jPlayer({
                                        cssSelector: 
                                        {
                                        seekBar: '.jp-seek-bar',
                                        playBar: '.jp-play-bar'
                                        }

        }