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

Posted 2023-05-09

【中文标题】脚本无法在 AJAX 页面加载时修改 jQuery Mobile 页面上的页脚？

【英文标题】：Script failing to modify footer on jQuery Mobile page on AJAX page load?

【发布时间】：2013-05-12 22:52:49

【问题描述】：

我正在使用这里的 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 hnnsepmnnsepsnn</em>',
    );

    $('#eventtimer').ready(function()
        console.log('Test');
    );
);
</script>
</div><!-- Close Footer -->

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

【问题讨论】：

请注意$('#eventtimer').ready( 没有任何意义。

您有重复 ID 问题。当第 2 页加载并初始化时，第 1 页仍然处于活动状态，因此 $("#eventtimer") 将选择第 1 页上的而不是第 2 页，因为 ID 必须是唯一的。另外，任何将事件绑定到文档的代码都应该在头部，否则在多次导航到页面时会绑定多个事件。

@Kevin B - 我认为你是完全正确的，我只是自己想到了这个想法并尝试了它并且成功了！

@Kevin B，也感谢 .ready 标注 - 显然我是 jquery 的新手。像我尝试那样执行测试的功能性方法是什么？

没有办法，但是不需要，因为您在页面初始化中。

【参考方案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 hnnsepmnnsepsnn</em>',
        );

        $('#eventtimer').ready(function()
            console.log('Test');
        );
    );

</script>

</div><!-- Close Footer -->

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