Circle players from template

[neojski]

Hi,

if I want to use some templating system and create view which will generate CirclePlayer for me I can't as the following does not work:

var template = '<div><div id="jquery_jplayer_1" class="cp-jplayer"></div> <div id="cp_container_1" class="cp-container"> <div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% --> <div class="cp-buffer-1"></div> <div class="cp-buffer-2"></div> </div> <div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% --> <div class="cp-progress-1"></div> <div class="cp-progress-2"></div> </div> <div class="cp-circle-control"></div> <ul class="cp-controls"> <li><a class="cp-play" tabindex="1">play</a></li> <li><a class="cp-pause" style="display:none;" tabindex="1">pause</a></li> <!-- Needs the inline style here, or jQuery.show() uses display:inline instead of display:block --> </ul> </div></div>'

var $template = $(template);
var myCirclePlayer = new CirclePlayer($template.find("#jquery_jplayer_1"),
{
    m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
    oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
}, {
    cssSelectorAncestor: "#cp_container_1"
});

$('body').append($template);

But the crazy thing is that if I move $('body').append($template) before new Cicr... then it works. The reason I don't want this workaround is that my view is not be responsible for self insertion into body.