Script failing to modify footer on jQuery Mobile p

问题:

I am using the jQuery Countdown plugin from here: http://keith-wood.name/countdown.html.

I am trying to use it to put a countdown in the footer of a jQuery Mobile site. I load the same footer on every page via a PHP Include. The script works fine on the initial page load, or on any refresh, but does not appear when navigating between pages.

I'm not sure if this is an issue with the way I'm calling jQuery Countdown specifically, or part of the bigger problem I'm having getting scripts to load in general due to jQuery Mobile's AJAX page loading.

Here's the code as it right now. Note: In this example I've got the script in line, but I've tried it in the Head, just above , above the div, below the div, in a separate file - everywhere I can think of and it works the same way. The plugin itself is linked in the site head, although I also tried moving that link to the footer to no effect.

<!-- Footer -->
<div data-role="footer" data-position="fixed" data-theme="d">

<h2><div id="eventtimer"></div></h2>

<script>
$(document).on('pageinit', function(event){ 

    $('#eventtimer').countdown({
        until: new Date(2013, 6-1, 4),
        compact: true,
        layout: 'Countdown: <em>{dn} {dl} {hnn}{sep}{mnn}{sep}{snn}</em>',
    });

    $('#eventtimer').ready(function(){
        console.log('Test');
    });
});
</script>
</div><!-- Close Footer -->

That console.log test does work just fine by the way, leading me to believe my overall call is right.

回答1:

Solved it myself this time! Realized as I stared at my own question that the jQuery Model of loading may mean I have an ID conflict since I'm using the same footer on each page. Changed it to a class instead and it's working!

Updated code:

<!-- Footer -->
<div data-role="footer" data-position="fixed" data-theme="d">

    <h2><div class="eventtimer"></div></h2>
    <script type="text/javascript" src="<?php echo $siteRoot; ?>/_scripts/vendor/jquery.countdown.js"></script>
    <script>
    $(document).on('pageinit', function(event){ 

        $('.eventtimer').countdown({
            until: new Date(2013, 6-1, 4),
            compact: true,
            layout: 'Countdown: <em>{dn} {dl} {hnn}{sep}{mnn}{sep}{snn}</em>',
        });

        $('#eventtimer').ready(function(){
            console.log('Test');
        });
    });

</script>

</div><!-- Close Footer -->

I' not marking this answered since I may have gotten lucky but still doing it wrong... please feel free to provide better insight.