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

【问题标题】：jQuery Mobile: javascript breaks when after loading a page from ajaxjQuery Mobile：从 ajax 加载页面后 javascript 中断
【发布时间】：2013-02-09 00:51:43
【问题描述】：

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

【问题讨论】：

标签： ajax jquery-mobile menu

【解决方案1】：

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

pageinit = DOM ready

人们在 jQuery 中学习的第一件事就是使用 $(document).ready() 函数用于尽快执行特定于 DOM 的代码因为 DOM 已经准备好了（这通常发生在 onload 事件之前很久）。然而，在 jQuery Mobile 网站和应用程序中，页面被请求并且注入到与用户导航相同的 DOM 中，因此 DOM 准备就绪事件没有那么有用，因为它只对第一页执行。每当在 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  
});

【讨论】：