ダイアログページを含むjqueryモバイルでマルチページテンプレートも作成しました。要件は、アイコンの1つをクリックするとダイアログボックスが表示されるはずですが、問題はすべてのページであり、ダイアログがなくても常に同じページに表示されます発生したイベント。何か不足している場合は教えてください。
コードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<title>Dialog</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="lib/jquery.mobile-1.3.1.min.css" />
<script type="text/javascript" src="lib/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="lib/jquery.mobile-1.3.1.min.js"></script>
<script></script>
</head>
<body>
<div data-role="page" id="one">
<div data-role="content" align="bottom">
<p>
<a href="#dialog" data-rel="dialog" data-transition="pop">click for dialog</a>
</p>
</div>
</div>
<div data-role="page" id="dialog">
<div data-role="header" data-theme="e">
<h1>dialog.</h1>
</div>
<div data-role="header" data-theme="d">
<h1>This is dialog.</h1>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
<div data-role="page" id="two">
<div data-role="header" data-theme="e">
<h1>page2</h1>
</div>
<div data-role="header" data-theme="d">
<h1>This is page2.</h1>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>