Question

我正在尝试使用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>

Answer 1

尝试将所有脚本拉到页面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>

$ .mobile.changePage无法在Chrome＆amp;苹果浏览器

1 个答案: