AJAX 动态播放列表不会播放歌曲

Question

我正在为我的网络应用制作音乐播放器。用户上传一些 mp3 文件到服务器后，播放列表将通过 AJAX 调用数据库自​​动生成。找到了一个不错的简单jquery插件音乐播放器here

如果我像这样在我的 HTML 中手动包含文件引用，它会完美工作：

<div id="playlist">
                <div href="./media/Maria (Extended remix) - Blondie .mp3" style="width: 400px;" class="item">
            <div>
                <div class="fr duration">02:06</div>
                <div class="btn play"></div>
                <div class="title"><b>Blondie</b> - Maria</div>
            </div>
            <div class="player inactive"></div>
        </div>

但这不是我的解决方案，因为服务器中有数百个 .mp3 文件。因此，我决定通过 ajax 调用生成文件列表，并使用 jquery 将其放入#playlist。喜欢这个：

function refresh_song_list()
{
    $.ajax({
        type: 'GET',
        url: 'profile/get_song',
        dataType: 'json',
        success: function(data) {
            var str='';
            for(i=0;i<data.length;i++)
            {
                str = str + ('<div href="'+ data[i][song_url]+'" style="width: 400px;" class="item"><div><div class="fr duration">02:06</div><div class="btn play"></div><div class="title"><b>'+ data[i]['artist']+'</b> '+ data[i]['song_title'] +'</div></div><div class="player inactive"></div></div>');   
            }
            $('#playlist').html(str); //this line add the songlist(playlist) into the #playlist div
        }
    }); 
}

然后，为了使播放列表可播放，我将这段代码（根据插件说明）放在 jquery 文档就绪范围内：

$("#playlist").playlist(
                {
                    playerurl: "js/jquery/jquery-plugins/drplayer/swf/drplayer.swf"
                }
            );   

问题是，播放列表加载成功，每个项目上都有播放按钮，但它不会播放歌曲。我的代码有错误吗？请帮帮我。谢谢

Answer 1

我的猜测是，因为您使用 ajax 填充播放列表，.playlist() 初始化程序看不到这些元素，因为它们还不存在（在您声明的文档就绪范围内）。

改为在您的 ajax 回调中调用 .playlist()：

       success: function(data) {
            var str='';
            for(i=0;i<data.length;i++)
            {
                str = str + ('<div href="'+ data[i][song_url]+'" style="width: 400px;" class="item"><div><div class="fr duration">02:06</div><div class="btn play"></div><div class="title"><b>'+ data[i]['artist']+'</b> '+ data[i]['song_title'] +'</div></div><div class="player inactive"></div></div>');   
            }
            $('#playlist').html(str); //this line add the songlist(playlist) into the #playlist div

            $("#playlist").playlist(
                {
                    playerurl: "js/jquery/jquery-plugins/drplayer/swf/drplayer.swf"
                }
            );
        }

Answer 2

试试

function refresh_song_list()
{
    $.ajax({
        type: 'GET',
        url: 'profile/get_song',
        dataType: 'json',
        success: function(data) {
            var str='';
            for(i=0;i<data.length;i++)
            {
                str = str + ('<div href="'+ data[i][song_url]+'" style="width: 400px;" class="item"><div><div class="fr duration">02:06</div><div class="btn play"></div><div class="title"><b>'+ data[i]['artist']+'</b> '+ data[i]['song_title'] +'</div></div><div class="player inactive"></div></div>');   
            }
            $('#playlist').html(str); //this line add the songlist(playlist) into the #playlist div
            bindPlaylist();

        }
    }); 
}



function bindPlaylist()
{

$("#playlist").playlist(
                {
                    playerurl: "js/jquery/jquery-plugins/drplayer/swf/drplayer.swf"
                }
            );

}