jQuery Mobile没有触发pageinit

现在，我的问题是'简单'（问题是，解决方案可能不是）。我有一个使用$ .json（）检索数据的函数。必须使用从'pageinit'/'pageshow'调用的函数将数据加载到<ul>中。虽然它根本不加载任何东西。但！当我刷新页面时，它完全没有问题地加载pageinit。jQuery Mobile没有触发pageinit

这是我的jQuery;

$('#showsPage').bind('pageshow', function(event) { 
    getShows(); 
}); 

/******* FUNCTIONS *********/ 
function getShows() 
{ 
    // Loading. 
    $.mobile.loading('show'); 

    // Load the data. 
    $.getJSON("some url", function(json) { 

     $("#listShows li").remove(); 

     $.each(json.data, function(index, show) { 

      $("#listShows").append("<li><a href='#'>Stuff</a></li>"); 
      $("#listShows").listview('refresh'); 

      // Hide the loading. 
      $.mobile.loading('hide'); 

     }); 
    }); 
}

我是否在做大幅度错误？我有一个页面运行在不同的页面上没有问题。

来源

2012-10-05 Roel

由于jQuery Mobile的AJAX处理页面转换，您应该在绑定页面事件时委派事件绑定，如pageinit或pageshow。

下面是一个例子：

$(document).on('pageshow', '#showsPage', getShows);

这将确保绑定不发生，直到#showsPage元素实际上是在DOM。

请注意，如果不传入任何参数，您不需要匿名函数。在不传递任何参数的情况下，您可以将该函数的名称作为回调传递给.on()方法。

请注意，无论用户何时刷新页面或深入链接到您的站点，都需要绑定此委托事件处理程序，因此我建议将其置于外部脚本中并将该脚本包含在每个文档的<head>之前结尾</body>标签也起作用，只是不在data-role="page"元素内），以便任何页面刷新都不会破坏您网站上的功能。另一种方法是将代码放入data-role="page"元素中的特定页面，以便通过AJAX将其引入到DOM中时，您的代码将由jQuery Mobile进行分析。

来源

2012-10-05 16:06:12 Jasper

这工作对我来说，但我不知道为什么。它在一些页面更改上工作，但不是其他的。但现在起作用，所以我只是想让它们都是这样。 – dgig

@ user399696这个答案基本上只是使用委托事件处理程序，这通常是jQuery Mobile项目的一个好主意。委托事件处理程序绑定到祖先元素，以便它现在和将来都可以在DOM中为元素触发。如果您有兴趣，您可以研究“委派的事件处理程序”以了解更多信息。 – Jasper

jQuery Mobile没有触发pageinit

回答

相关问题