jquery - 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"
                }
            );
        }