$（document）.ready和$（document）.on（’pageinit’）之间的区别

我正在使用jquery mobile，我想重现这段代码：

$(document).ready(function () { $.mobile.loading('show'); }); 

它显示了微调器，直到我决定使用其他函数隐藏它

 $.mobile.loading( 'hide' ); 

现在我看到document.ready（）在jquery mobile 1.2中已被弃用，所以他们建议用$(document).on('pageinit')替换它$(document).on('pageinit')

但如果我用建议的代码替换我的代码微调器自动隐藏……为什么？ 这是新代码：

  $(document).on('pageinit',function(){ $.mobile.loading( 'show' ); }); 

Answer 1

有关：

这篇文章也可以在我的博客HERE中找到 。

解

首先，您需要了解jQM页面事件及其流程。

 $(document).on('pageinit',function(){ $.mobile.loading( 'show' ); }); 

确实取代了：

 $(document).ready(function () { $.mobile.loading('show'); }); 

但是jQM页面包含几个阶段。 在您的情况下，为了能够显示微调器，您需要使用pageshow事件。 必须显示页面才能显示微调器。 我为你创建了一个例子： http ： //jsfiddle.net/Gajotres/Nncem/ 。 在其中转到下一页以查看微调器。 您还可以使用pageinit替换pageshow以查看差异。

你应该使用这个代码：

 $(document).live('pageshow', function (e, data) { $.mobile.loading('show'); }); 

但即使这不是正确的方法，最好的jQM方式是使用这种语法：

 $('div[data-role="page"]').live('pageshow', function (e, data) { $.mobile.loading('show'); }); 

或者，如果要将其绑定到单个页面，请使用以下命令：

 $('#pageID').live('pageshow', function (e, data) { $.mobile.loading('show'); }); 

其中pageID是您网页的ID。

$（document）.on（’pageinit’）vs $（document）.ready（）

你在jQuery中学到的第一件事就是在$（document）.ready（）函数中调用代码，这样一旦加载DOM就会执行所有操作。 但是，在jQuery Mobile中 ，Ajax用于在导航时将每个页面的内容加载到DOM中。 由于这个$（文档）.ready（）将在加载第一个页面之前触发，并且每个用于页面操作的代码将在页面刷新后执行。 这可能是一个非常微妙的错误。 在某些系统上，它似乎可以正常工作，但在其他系统上，它可能会导致不稳定，难以重复的怪异发生。

经典的jQuery语法：

 $(document).ready() { }); 

为了解决这个问题（并且相信我这是一个问题）， jQuery Mobile开发人员创建了页面事件。 简而言之，事件是在特定页面执行中触发的事件。 其中一个页面事件是一个pageinit事件，我们可以像这样使用它：

 $(document).on('pageinit', function(){ }); 

我们可以更进一步，使用页面ID而不是文档选择器。 让我们说我们有一个带有id 索引的 jQuery Mobile页面：

 
 
 
 First Page 
 Next 
 
 Test button 
 
 
  

要执行只能用于索引页面的代码，我们可以使用以下语法：

 $('#index').on('pageinit', function(){ }); 

每当第一次加载和显示页面时，都会执行Pageinit事件。 除非手动刷新页面或关闭ajax页面加载，否则它不会再次触发。 如果您希望每次访问页面时都执行代码，最好使用pagebeforeshow事件。

这是一个工作示例： http ： //jsfiddle.net/Gajotres/Q3Usv/来演示此问题。

关于这个问题的几点注释。 无论您是使用1个html多个页面还是多个html文件范例，建议将所有自定义javascript页面处理分成单个单独的js文件。 这将注意使您的代码更好，但您将有更好的代码概述，尤其是在创建jQuery Mobile应用程序时。

还有另一个特殊的jQuery Mobile事件，它被称为mobileinit 。当jQuery Mobile启动时，它会在文档对象上触发mobileinit事件。 要覆盖默认设置，请将它们绑定到mobileinit 。 mobileinit使用的一个很好的例子是关闭ajax页面加载或更改默认的ajax加载器行为。

 $(document).on("mobileinit", function(){ //apply overrides here }); 

Answer 2

该

 $(document).on('pageinit') 

方法是在动态页面加载发生后触发jquery mobile。

 $(document).ready() 

不会表现得像

 $(document).on('pageinit') 

因为它只在页面加载时触发一次。

Answer 3

尝试

为表演

 $.mobile.showPageLoadingMsg(); 

为了隐藏

 $.mobile.hidePageLoadingMsg(); 

如果动态附加内容，则必须隐藏微调器

检查一下

Answer 4

发生动态页面加载时不使用pageinit。 事实并非如此。 原因是因为document.ready（）只会被调用一次。 这意味着如果您有多个页面在准备就绪时要执行某些操作，则无法执行此操作。

因此，document.ready（）只能工作一次，但pageinit可以在页面初始化时使用。