我不确定它是否是一个错误,或者它是否是jQuery Mobile中对话框的标准方法,但是当您单击按钮并且页面是新的时,我会打开一个dialog
框加载。但是,当您关闭它并再次打开时,它会打开并关闭。有没有办法让对话框打开多次?
编辑:我已编辑了我的代码以包含第二个data-role="page"
因为我的问题仅发生在第二页上。
这是我的代码:
<!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>
$(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);
});
[{
"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"
}
]
答案 0 :(得分:0)
此代码将解决您的问题:
<强> Home.html中强>
setdefault()
<强> dialog.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>
<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"/>
<script>
$(document).on("pageinit", "#filterPage", function () {
$.getJSON("../JSON/list_data.json", function(info){
var li = "";
$.each(info, function (i, name) {
li = $('<li class="info-go"><a href="#" id="' + i + '" data-transition="slide" >' + name.county + '</a></li>');
li.data("info",name);
$("#chipperList").append(li);
});
$("#chipperList").listview("refresh");
});
});
$(document).on("click", ".info-go", function (e) {
$("#listDetails").data("info", $(this).data("info"));
$.mobile.changePage("#listDetails");
});
$(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);
});
</script>
</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">
<a href="#filterPage" class="ui-btn ui-icon-search ui-btn-icon-left" ata-rel="back">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="dialog.html" data-rel="dialog" data-transition="pop">Free Coupon</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
答案 1 :(得分:-1)
尝试从此行中删除“../”:
<script src="../JS/jquery.mobile-1.4.5.min.js"></script>
到此:
<script src="JS/jquery.mobile-1.4.5.min.js"></script>
答案 2 :(得分:-1)
您可能需要将autoOpen
设置为false并将click事件处理程序应用于对话框,因为此问题听起来就像每次单击时都会重新创建对话框。
尝试将此添加到页面:
$(document).ready(function() {
$('#freeCoupon').dialog({
autoOpen: false
});
$('#freeCoupon').click(function() {
$('this').dialog('open');
});
});
修改强>
如果这不起作用,那么我猜猜jQuery Mobile文件没有正确链接。目前,请尝试使用CDN网址并替换:
<script src="../JS/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="../CSS/jquery.mobile-1.4.5.min.css"/>
使用:
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">