Hi,

I'm a relative newcomer to jQuery (and Javascript in general), and I'm
having a problem with content loaded via AJAX that I gather is related
to event delegation/rebinding.

I'm using jqModal to populate a modal window with html content via
AJAX.  The content contains both text and a Flowplayer instance (open
source .flv player).  The first time I open the modal window, both the
text and the Flowplayer movie load properly via AJAX.  But each
subsequent time I open the modal window, only the text appears.

Here is the code for the original page (default.php):

<body>
        <a href="#" class="jqModal">Click here for AJAX!</a>
        <div id="wrapper">
                <div id="ajax" class="jqmWindow">
                        <a id="player" class="flowplayer"></a>
                </div> <!-- end #ajax -->
        </div>

</body>

Here is the content loaded via AJAX (ajax.php):

<a href="#" class="jqmClose">Close</a>
<br />
<h2 class="centered">AJAX works!</h2>
<a id="player">
</a>

Here is the jQuery script:

var loadFlowplayer = function() {
        $("#player").flowplayer("/swf/flowplayer-3.0.2.swf", {
                clip: {
                        url: '/video/test.flv',
                        autoPlay: false
                }
        });
}

$(document).ready(function() {

        $('#ajax').jqm({ajax: '/ajax.php', onLoad: loadFlowplayer};

});

After reading through the jQuery board for similar topics, I tried
removing the Flowplayer portion of the jQuery script (and deleting the
jqModal onLoad callback) and appending it directly to ajax.php, like
so:

<a href="#" class="jqmClose">Close</a>
<br />
<h2 class="centered">AJAX works!</h2>
<a id="player"></a>

<script type="text/javascript" charset="utf-8">

        $('#player').flowplayer('/swf/flowplayer-3.0.2.swf', {
                clip: {
                        url: '/video/test.flv',
                        autoPlay: false
                }
        });

</script>

The result was the same -- both movie player and text load fine after
the first AJAX call, each subsequent time only the text loads.

I thought that by either calling flowplayer() as a callback to the
AJAX request in the external script or by including it inline in
script tags with the remote content that I was rebinding the event to
the jQuery selector, but it seems I'm mistaken.

Any help would be much appreciated.

Cheers,
Jeff


Reply via email to