我正在尝试使用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并将其放在结束body标签之前。这是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>