MediaElement.js audio tag doesn't get style added dynamic

Question

Hello guys one question...

I want to use MediaElement.js to wrap my audio tags so I can have the same player on all browsers... I use JQM 1.4...

When I add the element static it works

<audio id="audio_element" preload="none" controls="controls">
      <source src="ClassicMelody.mp3">
      <source src="ClassicMelody.ogg">
    </audio>

But when I add it dynamic like this it doesn't have the MedialElement style:

var content =$('<div data-role="collapsible" id="set"' + naslov + '"><h3><img class="imgg" style="vertical-align: middle;margin-right:30px" src="images/'+slika+'" width="150" height="150"  /><span class="titleg" style="display: inline-block; vertical-align: middle">'+ stevilka +'Sectionit ' + naslov + '</span></h3><p>' + kratek + '</p><audio id="audio_element" preload="none" controls="controls"><source src="'+ posneteki +'"><source src="'+ posneteka +'"></audio><a data-ajax="false" href="#" onclick="poslinapri(\''+niz+'\')" class="ui-btn ui-shadow ui-corner-all"><div class="prostor1tr">More</div></a></div>')

        $('#set').append(content);
        content.collapsible();

What can couse this problem ?

Thanks

Answer 1

Update

Dynamically added video and audio tags should be initialized after appending them.

$('#set').append(content).collapsibleset().find('video,audio').mediaelementplayer();

---

You have two solutions to achieve this.

1. Solution one:

   Append content as an object and enhance it using .collapsible().

   var content = $( $("<div/>").collapsible() );
   $("#parent").append(content);
   

2. Solution two:

   Call enhancement on parent div, to enhance all contents using .enhanceWithin().

   var content = $("<div/>");
   $("#parent").append(content).enhanceWitin();
   

Demo