脚本无法在AJAX页面加载上修改jQuery移动页面上的页脚？

我在这里使用jQuery倒计时插件：

我正试图用它在jQuery移动站点的页脚上倒计时。我通过PHP Include在每个页面上加载相同的页脚。该脚本在初始页面加载或任何刷新时都可以正常工作，但在页面之间导航时不会出现

我不确定这是否与我调用jQuery倒计时的方式有关，或者是由于jQueryMobile的AJAX页面加载而导致的更大问题的一部分

这是目前的代码。注意：在这个例子中，我把脚本放在一行中，但我在头上、div上方、div下方、一个单独的文件中尝试了它——在我能想到的任何地方，它的工作方式都是一样的。插件本身链接在站点头部，尽管我也尝试将该链接移动到页脚，但没有任何效果

<!-- 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 -->

$（文档）.on（'pageinit'，函数（事件）{
$（“#事件计时器”）。倒计时({
截止日期：新日期（2013年6月1日至4日），
是的，
布局：“倒计时：{dn}{dl}{hnn}{sep}{mnn}{sep}{snn}”，
});
$（'#eventtimer'）.ready（函数（）{
console.log（'Test'）；
});
});

---

顺便说一句，console.log测试确实很好，这让我相信我的总体判断是正确的。

这次我自己解决了这个问题！当我开始思考自己的问题时意识到，jQuery加载模型可能意味着我有一个ID冲突，因为我在每个页面上使用相同的页脚。改成了一个类，它开始工作了

更新代码：

<!-- 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 -->

这次我自己解决了！当我开始思考自己的问题时意识到，jQuery加载模型可能意味着我有一个ID冲突，因为我在每个页面上使用相同的页脚。改成了一个类，它开始工作了

更新代码：

<!-- 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 -->


请注意，
$（“#eventtimer”）.ready（
没有任何意义。您有一个重复的ID问题。当加载并初始化第2页时，第1页仍然处于活动状态，因此$（“#eventtimer”）将选择第1页而不是第2页上的一个，因为ID必须是唯一的。此外，任何将事件绑定到文档的代码都应该在标题中，否则在多次导航到该页时，它将绑定多个事件。@Kevin B-我想你完全正确，我刚刚想到了这个主意并尝试了它，它成功了！@Kevin B，谢谢同样在.ready callout上-显然，我对jquery总体来说是新手。执行测试的功能性方法应该是什么？尽管没有方法，但不需要它，因为您在页面init中。请注意
$（'#eventtimer'）。ready（
没有任何意义。您有重复ID问题。当加载并初始化第2页时，第1页仍然处于活动状态，因此$（“#eventtimer”）将选择第1页而不是第2页上的一个，因为ID必须是唯一的。此外，任何将事件绑定到文档的代码都应该在标题中，否则在多次导航到该页时，它将绑定多个事件。@Kevin B-我想你完全正确，我刚刚想到了这个主意并尝试了它，它成功了！@Kevin B，谢谢同样在.ready callout上-显然，我对jquery总体来说是新手。执行测试的功能性方法应该是什么？虽然没有方法，但不需要，因为您在页面初始化中。