jquery - 如何使用 jQuery Mobile 在页面转换后执行 JavaScript

Question

当一个页面转换到另一个页面(并使用 location.hash 内容)时，第二个页面不会加载任何 JavaScript。加载页面时如何执行 JavaScript(如果该页面“来自”其父级的转换)？

我有 page1.html，其中包含 page2.html 的链接。此 page2.html 加载时带有过渡(默认为幻灯片效果)。

在 page2.html 中没有执行 JavaScript。我尝试了一个简单的

<script type="text/javascript">
alert("x");
</script>

但不起作用。我尝试了很多 document.ready、bind、live、oncreate、pagecreate，等等。

Answer 1

您可以使用回调函数。动画结束后调用一个函数。

在 jQuery 中:

$('#yourElement').animate({
    opacity: 0.25,
  }, 5000, function() {
    // Animation complete. add your callback logic here
});

如果使用 Webkit 转换:

$('#yourElement').addEventListener(
 'webkitTransitionEnd',
 function( event ) {
     // Animation complete. add your callback logic here
 }, false );

如果使用 jQuery Mobile，您似乎可以使用“pageshow”和“pagehide”事件监听器:

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

$('div').live('pageshow',function(event, ui){
  alert('This page was just hidden: '+ ui.prevPage);
});

$('div').live('pagehide',function(event, ui){
  alert('This page was just shown: '+ ui.nextPage);
});