Question

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

我制作了一个从左侧滑入的导航菜单，并将主要内容推向右侧。当我点击页面链接时，它通过ajax加载新页面，但是然后在新页面上，如果我单击菜单按钮，jQuery不会选择它，所以没有任何反应（菜单没有滑出）。 / p>

$(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文件中，该文件包含在两个页面的标题中。我知道脚本正常工作，因为当我刷新页面时，菜单触发器起作用。有没有已知的工作呢？

Answer 1

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

<强> pageinit = DOM ready

人们在jQuery中学习的第一件事就是使用   $（document）.ready（）函数用于尽快执行特定于DOM的代码   因为DOM已准备好（通常在onload事件之前很久就会发生）。   然而，在jQuery Mobile网站和应用程序中，请求和页面   注入与用户导航相同的DOM，因此DOM就绪了   event不是很有用，因为它只对第一页执行。 To   每当在jQuery中加载和创建新页面时执行代码   移动，您可以绑定到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  
});

jQuery Mobile：从ajax加载页面后javascript中断

1 个答案: