【发布时间】：2016-08-22 18:07:11
【问题描述】：
我不确定这是否是一个错误，或者它是否是 jQuery Mobile 中对话框的标准方法，但我有一个 dialog 框，当您单击按钮并新加载页面时会打开该框。但是，当您关闭它并再次打开它时，它会闪烁打开并关闭。有没有办法让对话框多次打开？？
编辑：我已经编辑了我的代码以包含第二个data-role="page"，因为我的问题只出现在第二页上。
这是我的代码：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>List App</title>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="../JS/jquery.mobile.icons-1.4.5.min.css"></script>
<script src="../JS/list.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<link rel="stylesheet" href="../CSS/stylesheet.css"/>
<link rel="stylesheet" href="../CSS/jquery.mobile.icons-1.4.5.min.css"/>
<link rel="stylesheet" href="../CSS/jquery.mobile.inline-png-1.4.5.min.css"/>
</head>
<body>
<!--FIRST PAGE-->
<div data-role="page" id="filterPage">
<div data-role="header" data-theme="b">
<h1>List App</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="chipperList" data-filter="true" data-filter-reveal="false" data-filter-placeholder="Chose a County..." data-divider-theme="a" data-inset="false" data-transition="slide" >
<li data-role="list-divider" data-theme="b" role="heading" >County</li>
</ul>
</div>
</div>
<!--SECOND PAGE-->
<div data-role="page" id="listDetails">
<div data-role="header" data-theme="b">
<h1>List App</h1>
<div data-role="navbar" data-rel="back">
<a href="#filterPage" class="ui-btn ui-icon-search ui-btn-icon-left">Return to Search</a>
</div>
</div>
<div data-role="content"></div>
<div data-role="footer" data-theme="b" data-position="fixed">
<div data-role ="navbar">
<ul>
<li><a href="#freeCoupon" data-rel="dialog" data-transition="pop">Free Coupon</a></li>
</ul>
</div>
</div>
</div>
<!--COUPON-->
<div data-role="dialog" id="freeCoupon">
<div data-role="header" data-theme="b">
<h1>Congratulations!</h1>
</div>
<div data-role ="content">
<img src="../CSS/IMAGES/coupon.jpg"/>
</div>
</div>
</body>
</html>
LIST.JS
$(document).on("pageinit", "#filterPage", function () {
$.getJSON("../JSON/list_data.json", function(info){
var li = "";
$.each(info, function (i, name) {
li += '<li><a href="#" id="' + i + '" data-transition="slide" class="info-go">' + name.county + '</a></li>';
$("#chipperList").empty();
$("#chipperList").append(li).promise().done(function () {
$(this).on("click", ".info-go", function (e) {
e.preventDefault();
$("#listDetails").data("info", info[this.id]);
$.mobile.changePage("#listDetails");
});
$(this).listview("refresh");
});
});
});
});
$(document).on("pagebeforeshow", "#listDetails", function () {
var info = $(this).data("info");
var info_view = "";
for (var key in info) {
info_view += '<div class="ui-grid-a"><div class="ui-block-a"><div class="ui-bar field" style="font-weight : bold; text-align: left;">' + key + '</div></div><div class="ui-block-b"><div class="ui-bar value" style="width : 70%">' + info[key] + '</div></div></div>';
}
$(this).find("[data-role=content]").html(info_view);
});
LIST_DATA.JSON
[{
"county": "Antrim",
"name": "Flash in The Pan",
"address": "Main Street, Bushmills",
"info": "Dummy Text"
}, {
"county": "Armagh",
"name": "The Galley",
"address": "Barrack Street, Armagh",
"info": "Dummy Text"
}, {
"county": "Carlow",
"name": "Roosters",
"address": "Market Square, Bagenalstown",
"info": "Dummy Text"
}
]
【问题讨论】：
-
你有这方面的javascript吗？
-
除了
<script>标签中链接的文件外，没有 JavaScript。我应该有吗？？ -
如果还没有解决我可以帮你
-
并非如此。我在第二页上取消了
dialog，但我在该页面上使用了data-rel="back"，这给出了同样的问题并且不得不使用data-ajax="false"，这意味着我失去了页面转换 -
@香烟独角兽我没有得到你
标签： javascript jquery jquery-mobile dialog