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

Question

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

Answer 1

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

pageinit = DOM ready

的第一件东西的人在jQuery的学习是使用 $（文件）。就绪（）函数尽快执行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 
});