jquery mobile、pageinit、pagecreate和冗余答案

【问题标题】：jquery mobile, pageinit, pagecreate, and redundancyjquery mobile、pageinit、pagecreate和冗余
【发布时间】：2012-04-26 15:03:43
【问题描述】：

提前感谢您查看这个 jQuery Mobile（版本 1.1.0）问题。

我的第一个问题是：您在每次页面加载和每次 ajax 页面调用时使用什么函数（它们似乎是 2 个独立的野兽）？我希望它们每次都运行。

$(document).bind('pageinit',function(){
    console.log('Does this work for you?');
});

我有几个使用 jQuery 代码实现各种功能的独立 jQuery-Mobile 驱动的 HTML 页面。其中一些功能包括在几个页面上发生的基于触摸的滑块（royalSlider），一些代码嗅探是否存在某些元素（例如固定的副页眉或页脚）以调整页面的边距，从而阻碍主要内容通过重叠元素，而其他 js 是一个脚本，它使用特定类触发每个图像的 AJAX 调用的每个元素。

问题是：我是否需要为每个页面的每个 ID 调用一个实时 pageinit 函数？我需要为每个页面使用 pageinit 和 pagecreate 吗？

例如，假设我有一个名为 face() 的函数，它可以查找是否有页脚，因此我可以向 .container 添加一个类以添加底部边距，从而遮挡主要内容。

理论上，我不能运行这样的函数，在登陆页面或通过 AJAX 拉入页面时点击每个活动页面吗？

$('[data-role="page"].ui-page-active').live('pageinit', function(){ 
    face();
});

不是：

$("#brand-grid,#product-grid,#main-grid,#trends").live('pageinit', function() {
    face();
});

我发现当我首先登陆需要偏移的页面时它可以工作，但是当你转到另一个页面时它不再工作。这是因为 DOM 中有 2 个 div[data-role="page"] 并且我的命令太模棱两可了吗？还是因为 pageinit 仅适用于原始页面而不适用于 AJAX 内容？

我的下一个问题：从页面导航后如何销毁页面？如果可以的话，我不希望平板电脑运行 2 个 RoyalSlider 实例。

这是我的尝试：

$('[data-role="page"].ui-page-active').live('pageinit', function(){
     $('[data-role="page"]:not(.ui-page-active)').live('pageremove');
});

您的任何见解都会很棒，我只是想避免内存泄漏和性能下降。除了这些气质问题之外，JQM 的开发非常棒。谢谢。

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

如果您想在每次通过 ajax 加载页面时运行一个函数，请使用

$(document).bind('pageinit')

http://jquerymobile.com/test/docs/api/events.html

我认为你可以做一些类似的事情来删除页面

$(document).bind('pageremove')

【讨论】：

好的，所以 $(document).bind('pageinit') 在每次通过 AJAX 加载时都会发生。初始页面加载（非 AJAX）怎么样？当加载第二个页面后，第一个页面“隐藏”在 DOM 中的第一个页面后面时，你如何定位 DOM 元素？是否有针对 ACTIVE [data-role="page"] 的特定选择器？
Pageinit 是否发生在每个页面加载 ajax 上。
每次页面加载除了初始页面加载都会发生这种情况。每次我点击一个链接 pageinit 都会触发，但是当我刷新页面时它不会。除非我有什么问题。

【解决方案2】：

问题 #1 的答案：

我相信我和你有同样的问题，我是这样解决的：在 pageinit 处理程序中，你应该包含 event 参数，因为事件的目标是新页面的 div（即具有 data-role 的 div ="page")，因此您可以在任何用于定位该页面上的 DOM 元素的 jQuery 选择器中使用目标作为上下文，例如：

$(document).on('pageinit', function(event) {
  $('#some-element', event.target).toggle();
});

问题 #2 的答案：

我想你可以在你的处理程序中为 pageremove 做同样的事情。

【讨论】：

【解决方案3】：

还要注意，在 jquery mobile 中，您不能在不同页面中拥有重复的 ID。即使元素位于不同的页面中，ID 也必须不同，因为页面已添加到文档中。更多（更好）的解释在这里：

https://forum.jquery.com/topic/pageinit-firing-twice#14737000002873163

【讨论】：