Question

我正在使用jPlayer播放音频文件。如果我在内容上使用播放器，这是免费的，当页面加载时，它没有任何问题。

我还需要它用于由AJAX插入的HTML。在这里它不起作用。似乎没有触发就绪事件。

我写了一个函数，可以由click()执行。这样，当包含播放器的HTML完全加载时，我可以手动单击它。在这里我遇到了同样的问题：未触发就绪事件。

这是我的功能，适用于非ajax插入的玩家：

$('.jp-jplayer').each(function () {
    var src = $(this).attr('data-src');
    var id = $(this).attr('id');
    var post_id = $(this).attr('data-id');
    alert('beg');
    $('#' + id).jPlayer({
        ready: function () {
            $(this).jPlayer('setMedia', {
                mp3: "/prelisten/_lofidl/change_of_heart_full_lofi.mp3",
            });
            alert('#' + id);
        },
        swfPath: "/wp-content/themes/Dark_3Chemical_DE_mit_Pagenavi/Dark_3Chemical_DE/audioplayer/js",
        //////ERRRROOOOOR
        solution: "flash, html",
        supplied: "mp3",
        wmode: "window",
        cssSelectorAncestor: "#jp_container_" + post_id,
        play: function () { // To avoid both jPlayers playing together.
            $(this).jPlayer("pauseOthers");
        },
        repeat: function (event) { // Override the default jPlayer repeat event handler
            if(event.jPlayer.options.loop) {
                $(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
                $(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function () {
                    $(this).jPlayer("play");
                    debug($(this));
                });
            } else {
                $(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
                $(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerNext", function () {
                    //$("#jquery_jplayer_4858").jPlayer("play", 0);
                });
            }
        },
    });
    $("#jplayer_inspector").jPlayerInspector({
        jPlayer: $('#' + id)
    });
});

目前我手动设置src以排除任何可能的错误。

如何在插入AJAX的内容上运行此功能？

修改

这是代码，它获取包含玩家的html：

$.get('/query_posts.php', {
    paged: _page,
    cats: cols
}, function(data) {
    $('#search-results').append(data).fadeIn(300);
    //create_player_scripts();
    //set_players();
    $('#search-results').find('input[name="cartLink"]').each(function() {
        $(this).val($(this).closest('.post1').find('.post_headl a').attr('href'));
    });
});

Answer 1

要进行AJAX页面重新加载工作，我必须首先销毁所有jplayer实例。所以我写了一个小函数来抓取网站上所有jplayer实例（通过查找jp-audio类）并调用jplayer('destroy');和jplayer('clearMedia')。此函数在$.ajax({ beforeSend: destroyJplayerInstances(); })

中调用

更新：以下是jPlayer开发人员Mark Panaghiston的声明： https://groups.google.com/forum/#!topic/jplayer/Q_aRhiyYvQo

希望有所帮助！

jplayer + Ajax插入的内容

1 个答案: