Colleagues, help me figure it out! There is a music site.

1) On the main page are the most recently added songs. To the left of each song there is a one-button player on html5 - UbaPlayer . Very light in size and intuitive to learn. When you click on the player - the current track is played. Here everything is working properly , as I need. (screenshot 1)

2) Below - the button "More songs" . From the database using ajax (JSON library) stretch another 20 songs. The output of the songs is true, but with the playback problems begin.

When you click on the player, the song no longer plays, but opens in a new window and already plays there. (screenshot 2).

I have a suspicion of JSON. He encodes this way: \ u043d, although this only applies to Cyrillic.

3) The code responsible for outputting an additional 20 songs with the player is as follows:

if (data.length > 0){$.each(data, function(index, data){$("#novinki_plus").append("<div class='msongli'><div class='play'><ul class='ubaplayer-controls'><li><a class='ubaplayer-button' href='" + data.link + "' id='song-" + data.id + "' data-id='" + data.id + "' data-link='" + data.link + "'></a></li></ul><a href='/mp3/" + data.id + "/" + data.artist_id + "/' class='msong' title='Скачать песню " + data.title + "'>" + data.title + "</a><span class='infodata'>" + data.time + "&nbsp;&nbsp;" + data.bitrate + " Kbs</span><span class='infosize'>" + data.size + " Mb</span></div></div>");}); inProcess = false; num += 20;} 

I do not understand, for some reason, the code is not correctly formatted here on the site, so I attach a screenshot of the piece of code. Screenshots had to be combined, because I can not put more than one screen, unfortunately. Low reputation (((

QUESTION: how to make the player play music in the same block in the same window as in the main block on the main page?

screenshot 1 - page with music and player for each song

screenshot 2 - player in a new window

screenshot 3 - code in phpDesigner

three combined screenshots

    1 answer 1

    In the .done() Ajax after inserting html, you need to re-initialize UbaPlayer, since at the time of loading the page there are NO elements, and UbaPlayer is not hung on them.

    • Can you throw in how it will look like? In Ajax is not strong - the script took ready, only a little under itself redid. Thank! - tlustenko