1

我在这里使用 jQuery Countdown 插件：http: //keith-wood.name/countdown.html。

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

我不确定这是否是我专门调用 jQuery Countdown 的方式的问题，或者是由于 jQuery Mobile 的 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 测试确实工作得很好，让我相信我的整体调用是正确的。

4

1 回答 1

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

我没有将此标记为已回答，因为我可能很幸运，但仍然做错了……请随时提供更好的见解。

于 2013-05-17T17:28:09.153 回答