Javascript violating audio players

I know about this problem in tumblr , the code crashes and the audio players are broken.

Now I am using flexslider.js, but the problem is almost the same. I fixed it with

    setTimeout(function() {                        
                $('.audio').each(function(){
                    var audioID = $(this).parent().attr("id");
                    var $audioPost = $(this);
                    $.ajax({
                        url: '/api/read/json?id=' + audioID,
                        dataType: 'jsonp',
                        timeout: 50000,
                        success: function(data){
                            if ($audioPost.html().indexOf("is required to") != -1) {
                            $audioPost.append('<div style=\"background-color:black;">' + data.posts[0]['audio-player'] +'</div>');
                                }
                            }
                    });
                });
            }, 2000);

You need to resize the browser window to see this, because I started coding from the mobile version, anyway ... it looks fine on the pages with the permalink http://tmbeta.tumblr.com/post/21264072020 , but this not when photosets (which use flexslider) and the player are on the same page http://tmbeta.tumblr.com/

, ? , , [Flash 9 .] . , .append, jquery, .

0
1

HTML, : append() audio, <article>. jQuery div - . ,

  • audio-player audio, ..

    $('.audio-player').each(function(){ … }
    

    this, , , , ..

    var audioID = $(this).parents('.audio').attr('id');
    

  • , ..

    $audioPost.find('.audio-player').append('<div style=\"background-color:black;">' + data.posts[0]['audio-player'] +'</div>');
    

    span , , Flash, do

    $audioPost.find('#audio_player_'+audioID).replaceWith('<div style=\"background-color:black;">' + data.posts[0]['audio-player'] +'</div>');
    

    .

; .

+1