2

提前感谢您查看此 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 的开发非常棒。谢谢你。

4

3 回答 3

2

对问题 #1 的回答：

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

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

对问题 2 的回答：

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

于 2012-07-01T05:38:30.757 回答
2

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

$(document).bind('pageinit')

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

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

$(document).bind('pageremove')
于 2012-04-26T15:26:16.687 回答
1

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

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

于 2012-05-16T08:43:46.550 回答