在AJAX页面加载时修改jQuery移动页面页脚的脚本失败

Question

我使用jQuery倒计时插件从这里:http://keith-wood.name/countdown.html。

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

我不确定这是否是一个问题的方式，我叫jQuery倒计时具体，或更大的问题的一部分，我有脚本加载一般由于jQuery移动的AJAX页面加载。

下面是现在的代码。注意:在这个例子中，我已经得到了一行脚本，但我已经在Head中尝试了它，就在上面，在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 -->

console.log测试确实工作得很好，让我相信我的整体调用是正确的。

Answer 1

这次我自己解决了!当我盯着我自己的问题时，我意识到加载的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 -->

我没有标记这个答案，因为我可能很幸运，但仍然做错了…请随时提供更好的见解