Question

我正在使用一个脚本，以便在单击时将锚点元素导航到我的网页底部。

我做的第一件事是在$（document）.ready（）函数中调用代码，所以一旦加载DOM就会执行所有操作。然后，当我在移动网站上的页面之间导航时，我注意到我的脚本无效：

$(document).ready(function(){
    $("#menu-button").click(function(){
            $(document).scrollTop($(".mainFooter").position().top);
         });
    });

但是我意识到为什么会这样，在jQuery Mobile中，Ajax用于在导航时将每个页面的内容加载到DOM中，并且DOM ready处理程序仅针对第一页执行。要在加载和创建新页面时执行代码，您可以绑定到本页底部描述的pageinit事件：http://jquerymobile.com/demos/1.1.1/docs/api/events.html

我已经绑定到pageinit事件，但是如果我在不同页面之间导航然后单击相同的锚点，则锚点仍然不会将用户导航到页面底部。我很难理解为什么绑定到pageinit没有解决问题。

 $(document).bind('pageinit', function() {
    $("#menu-button").on('click.menu', function(){
        $(document).scrollTop($(".mainFooter").position().top);
     });
    });

我知道可以在jQuery mobile中关闭AJAX，这样我的代码就可以使用$（document）.ready（）函数运行。这样做可以让我实现所需的功能。理想情况下，虽然我想让pageinit在启用AJAX的情况下工作，这样每次使用AJAX加载页面时锚都会起作用。

我们非常感谢任何建议。

Answer 1

为了让mobileinit能够正常工作，您应该在实际加载jQuery Mobile之前放置代码。因此，您需要添加指向JS源代码的链接，如下所示：

<script src="jquery.js"></script> <script src="custom-scripting.js"></script> // Place mobileinit script here <script src="jquery-mobile.js"></script>

有关详情，请参阅docs

另外，值得注意的是，mobileinit基本上是用于覆盖全局变量，而不是用于使用网站的常规功能。

使用其他活动，例如pagebeforeshow，pageshow，pagebeforeload等......为此目的

Answer 2

我认为您正在尝试将事件绑定到尚未在DOM中的事件。试试这个：

$(document).bind('pageinit', function() {
    $(document).on('click.menu', '#menu-button', function(){
        $(document).scrollTop($(".mainFooter").position().top);
    });
});

或

$(document).bind('pagebeforeshow', function() {
    $("#menu-button").on('click.menu', function(){
        $(document).scrollTop($(".mainFooter").position().top);
    });
});

JQuery mobile 1.1.1 - 使用$（document）.bind（＆＃39; pageinit＆＃39;），不加载脚本

2 个答案: