Question

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

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

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

我有几个独立的jQuery-Mobile支持的HTML页面，使用jQuery代码实现各种功能。其中一些功能包括在几页上发生的基于触摸的滑块（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内容？

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

这是我的尝试：

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

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

Answer 1

如果您希望每次通过ajax加载页面时运行一个函数

$(document).bind('pageinit')

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

我认为您可以使用

删除页面

$(document).bind('pageremove')

Answer 2

对问题＃1的回答：

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

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

对问题＃2的回答：

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

Answer 3

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

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

jquery mobile，pageinit，pagecreate和redundancy

3 个答案: