Question

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

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

我不确定这是否是我专门调用jQuery Countdown的方式的问题，或者是由于jQuery Mobile＆而导致脚本加载的更大问题的一部分＃39;加载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 -->

顺便说一句，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 -->

我没有给这个回答，因为我可能已经幸运但仍然做错了...请随时提供更好的见解。

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

1 个答案: