javascript - $.mobile.changePage 在 Chrome 和 Safari 中不起作用

标签 javascript jquery google-chrome jquery-mobile safari

我正在尝试使用 jQuery Mobile 显示一个对话框。代码如下

if(condition){
  setTimeout(function(){
    $.mobile.changePage('#myDiv',{transition:'pop', role: 'dialog'});
  },100);
}

我还有以下代码来动态生成该对话框的内容

$('#myDiv').on('pageshow', function(){
  // do custom operation
});

它在 Fireforx 和 IE 中运行良好。但在 chrome 和 safari 中,该对话框出现然后在几秒钟内消失。

我已经为此绞尽脑汁一天了。非常感谢任何帮助。

提前致谢

编辑:我认为如果我陈述 DOM 结构会很棒。所以我来了...

<html>
<head>...</head>
<body>
 <div data-role="page" id="startPage">
  ...
  <script>
   $('#startPage').on('pageinit', function(){
    // Do some stuff
    if(condition){
     setTimeout(function(){
      $.mobile.changePage('#myDiv', {transition: 'pop', role: 'dialog'});
     }, 100);
    }
   });
  </script>
 </div>
 <div data-role="dialog" id="myDiv">
  ...
  <script>
   $('#myDiv').on('pageshow', function(){
    // do custom operation
   });
  </script>
 </div>
</body>
</html>

最佳答案

尝试将所有脚本拉到页面 DIV 之外,并将其放在结束正文标记之前。这是fiddle 。这在 Chrome 和 Safari 中适用于我。

<div data-role="page" id="startPage">
  <div data-role="header"><h1>Page</h1></div>
</div>

<div data-role="dialog" id="myDiv">
  <div data-role="header"><h1>Dialog</h1></div>
  <div data-role="content">
    <span id="dynamicContent"></span>
  </div>
</div>

<script>
var condition = true;   
$('#startPage').on('pageinit', function(){
  if(condition){
   setTimeout(function(){
    $.mobile.changePage('#myDiv', {transition: 'pop', role: 'dialog'});
   }, 100);
  }
});

$('#myDiv').on('pageshow', function(){
  $('#dynamicContent').html('Here is some dynamic content!');
});
</script>

关于javascript - $.mobile.changePage 在 Chrome 和 Safari 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18998835/

相关文章:

javascript - Reactjs类型错误: Class extends value undefined is not a constructor or null

javascript - 具有向 Apple AppStore 提交 HTML/JS 应用程序(例如 jQuery Mobile 和 PhoneGap)的经验

javascript - 替代 window.load

jquery - 事件点击谷歌地图V3上的矩形

javascript - 为任何页面创建按钮单击处理程序

html - Canvas 默认大小

javascript - Ember.js 中的 View 与组件

javascript - 使用表单输入更改单选值

windows - Html5 Canvas : Rotated text looks distorted on Google Chrome

javascript - Chrome 缩放闪光灯不正确