Если я открою диалоговое окно jquery для мобильных устройств на моей стартовой странице следующим образом:
@Html.ActionLink("DialogPage", "DialogPage", "Home", null, new {data_rel="dialog" })
и затем закройте диалоговое окно с помощью кнопки X, стартовая страница не будет перезагружена, что, я думаю, является правильным поведением.
Но если я перейду на вторую страницу и открою диалоговое окно мобильного jquery точно так же, как на второй странице, и при помощи кнопки X закрою диалоговое окно, вторая страница перезагрузится!
Это очень легко воспроизвести. Это ошибка или это в некотором роде ожидаемое поведение?
Это сводило меня с ума уже несколько дней (даже недель). Пожалуйста, помогите мне.
Редактировать: я не знаю, как связать страницы в jsfiddle, но вот мой исходный код, разделенный на три страницы (жирным шрифтом):
Стартовая страница:
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link type="text/css" href="Content/themes/base/jquery.mobile/jquery.mobile-1.0.min.css" rel="stylesheet" />
<script type="text/javascript" src="Scripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
});
</script>
<script type="text/javascript" src="Scripts/jquery.mobile/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-theme="c" data-role="header" data-position="inline" style="height: 70px; background-image: url('/Intranet/Mobile/Images/Bg_Main.png'); background-repeat: repeat-x">
<h1>header</h1>
</div>
<h2>Jquery mobile dialog bug?</h2>
<div data-role="content">
<a href="../Dialog/Dialog" data-rel="dialog">First dialog without postback behavior</a>
<br />
<br />
<a href="/SecondPage/TheSecondPage">Link to second page containing a dialog with postback</a>
</div>
<div data-role="footer" data-theme="c" class="ui-bar">
</div>
</div>
</body>
</html>
Вторая страница:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link type="text/css" href="../Content/themes/base/jquery.mobile/jquery.mobile-1.0.min.css" rel="stylesheet" />
<script type="text/javascript" src="../Scripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
});
</script>
<script type="text/javascript" src="../Scripts/jquery.mobile/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-theme="c" data-role="header" data-position="inline" style="height: 70px; background-image: url('/Intranet/Mobile/Images/Bg_Main.png'); background-repeat: repeat-x">
<h1>
header</h1>
</div>
<div data-role="content">
<a href="../Dialog/Dialog" data-rel="dialog">Dialog with postback behavior</a>
<br />
<br />
</div>
<div data-role="footer" data-theme="c" class="ui-bar">
</div>
</div>
</body>
</html>
Страница диалога:
<div data-role="content" data-theme="a" >
This is the dialog.
</div>
Если есть что-то еще, что я могу сделать, чтобы сделать это проще, пожалуйста, дайте мне знать.
Редактировать 2: Я думаю, что это связано с:
https://github.com/jquery/jquery-mobile/issues/3549#issuecomment-4060809
содержащий аналогичный пример.