1

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

1 回答 1

0

尝试将所有脚本拉到页面 DIV 之外，并将其放在结束正文标记之前。这是一个小提琴。这适用于我在 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>
于 2013-09-27T15:45:27.977 回答