jplayer+Ajax inserted content

Question

I am using jPlayer to play audio files. If I use the player on content, which is privided, when the page gets loaded, it works without any problems.

I also need it for HTML which is inserted by AJAX. Here it does not work. It seems, that the ready event is not triggered.

I wrote a function, which can be executed by click(). In that way, I can click it manually, when the HTML which contains the player is fully loaded. Here I have the same problem: The ready event is not triggered.

This is my function which works on non ajax inserted players fine:

$('.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)
    });
});

Currently I am setting the src manually to exclude any possible errors here.

How can I get this function running on AJAX inserted content?

EDIT:

This is the code, which fetches the html including the players:

$.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

To make an AJAX page reload work I had to first destroy all jplayer instances. So I wrote a little function that grabs all instances of a jplayer on the site (by looking for jp-audio classes) and calls jplayer('destroy'); and jplayer('clearMedia'). This function gets called in the $.ajax({ beforeSend: destroyJplayerInstances(); })

UPDATE: Here is a statement from the developer of jPlayer, Mark Panaghiston: https://groups.google.com/forum/#!topic/jplayer/Q_aRhiyYvQo

Hope that helps!