1

我正在使用脚本来使锚元素在单击时将用户导航到我的网页底部。

我做的第一件事是在 $(document).ready() 函数中调用代码，这样一旦加载了 DOM，一切都会执行。然后，当我在移动网站上的页面之间导航时，我注意到我的脚本不起作用：

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

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

任何建议将不胜感激。

4

2 回答 2

1

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

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

可以在文档中找到更多相关信息

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

为此目的使用其他事件，如,pagebeforeshow等...pageshowpagebeforeload

于 2012-09-10T15:55:05.140 回答
0

我认为您正在尝试将事件绑定到尚未在 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);
    });
});
于 2012-09-10T15:52:31.093 回答