0

所以我决定使用 jQuery Mobile 框架来构建我的新移动网站。它具有通过ajax加载任何本地href链接的功能，这很棒。但是加载的新页面不响应任何 javascript。我有一个主页和第 2 页，它们都有相同的 html 布局，其中内容有一些变化，我举个例子。

我制作了一个从左侧滑入并将主要内容推到右侧的导航菜单。当我单击页面链接时，它会通过 ajax 加载新页面，但是在新页面上，如果我单击菜单按钮，jQuery 不会选择它，因此什么也不会发生（菜单不会滑出）。

$(document).ready(function() {
$( ".menu-trigger" ).click(function() {
    console.log("1")
    if ($( 'nav' ).hasClass('navTransform')) {
        console.log("2")
    $( 'nav' ).removeClass('navTransform');
    $( 'article' ).removeClass('articleTransform'); 
    }
    else {
        console.log("3")
    $( 'nav' ).addClass('navTransform');
    $( 'article' ).addClass('articleTransform');
    }
});
});

此 jQuery 脚本位于单独的 .js 文件中，该文件包含在两个页面的标题中。我知道脚本正常工作，因为当我刷新页面时，菜单触发器工作。有没有已知的解决方法？

4

1 回答 1

0

解决方法是使用适当的 jQM 处理程序pageinit()而不是 jQuery 就绪处理程序。

pageinit = DOM 就绪

人们在 jQuery 中学习的第一件事就是使用 $(document).ready() 函数在 DOM 准备好后立即执行特定于 DOM 的代码（这通常发生在 onload 事件之前很久）。 但是，在 jQuery Mobile 站点和应用程序中，页面被请求并注入到与用户导航相同的 DOM 中，因此 DOM 就绪事件没有那么有用，因为它只针对第一页执行。要在 jQuery Mobile 中加载和创建新页面时执行代码，您可以绑定到 pageinit 事件。

因此，您的代码可能如下所示：

$(document).on("pageinit", "#page1", function(){
    //Your init code for page 1 goes here  
});

$(document).on("pageinit", "#page2", function(){
    //Your init code for page 2 goes here  
});
于 2013-02-09T01:29:36.530 回答