脚本无法在AJAX页面加载上修改jQuery Mobile页面上的页脚？ [英] Script failing to modify footer on jQuery Mobile page on AJAX page load?

问题描述

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

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

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

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.

我不确定这是否是一个问题我专门调用jQuery Countdown的方式，或者是由于jQuery Mobile的AJAX页面加载而导致脚本加载的更大问题的一部分。

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.

这里是现在的代码。注意：在这个例子中我已经将脚本排成一行，但是我已经在头部，上面，div上方，div下面，在一个单独的文件中尝试过它 - 我能想到的任何地方并且它的工作方式相同办法。插件本身链接在站点头部，虽然我也尝试将该链接移动到页脚无效。

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

顺便说一下，console.log测试运行得很好，让我相信我的整体通话是对。

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

推荐答案

这次自己解决了！实现我盯着我自己的问题，加载的jQuery模型可能意味着我有ID冲突，因为我在每个页面上使用相同的页脚。改为将其更改为一个类而且它正在工作！

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!

更新代码：

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

这篇关于脚本无法在AJAX页面加载上修改jQuery Mobile页面上的页脚？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！