我正在使用像这样的JavaScript ...
<select onchange="document.langForm.submit();" ... >
但是当我开始使用jquerymobile时就崩溃了。
我知道此问题已经出现过100次。但是之前案例的超链接在这里不会有用，因为我已经阅读了几十个，不幸的是我只是不够聪明，无法理解任何其他讨论。认真。我完全糊涂了。
另一方面，我已经抽出时间做了一个真正的，非常简单的例子来展示我的头痛。所以，如果有人能告诉我如何修复这两个页面，那将非常感激。http://activemetrics.ch/test/en.html
http://activemetrics.ch/test/de.html
请注意，您可以在浏览器中加载其中一个，然后通过更改选择列表中的选项切换到另一个页面。但是，在进入第二页后，您无法使用类似的操作返回第一页。
是的，这与ajax有关。我知道的很多。但是，对于我来说，在这两个页面上解决问题的最佳方法是什么，以便用户可以轻松地在两个页面之间来回切换？
欢迎所有建议。
非常感谢那些为我考虑这个问题而花费一些脑力的人！
-JD
答案 0 :(得分：1)
要了解这种情况，您需要了解 jQuery Mobile 的工作原理。它使用ajax加载其他页面。
第一页正常加载。其 HEAD 和 BODY 已加载到 DOM 中，他们在那里等待其他人内容。加载第二页后，只有 BODY 内容会加载到 DOM 中。
根据我的答案，你明白这一点，但你犯了一个错误。有2个html文件： en.html 和 de.html ，但它们的名称并不重要。重要的是 data-role="page" div的网页ID或ID的属性。在您的情况下，您有2个页面具有相同的div和相同的选择ID。因为它们都加载到 DOM 事件中，所以绑定将始终转到第一个加载的页面。
您需要为页面和选择框使用唯一ID。
<强> en.html
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<div data-role="page" id="sbePage1">
<h3>this is english</h3>
<form name="langForm" id="langForm" action="BookNow.asp?" method="get" style="margin-top:0px auto">
<select data-inline="true" name="lang" id="langId" data-native-menu="false" >
<option value="1972" SELECTED>Something Already Selected</option>
<option value="1973">Some Sort of Change</option>
</select>
</form>
<script>
$(document).on('pageinit', '#sbePage1' ,function () {
$(document).off('change', '#langId').on('change', '#langId',function (event) {
$.mobile.changePage('de.html', {
type: 'get',
data: ''
});
});
});
</script>
</div><!-- /page -->
</body>
</html>
<强> de.html
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<div data-role="page" id="sbePage2">
<h3>this is german</h3>
<form name="langForm2" id="langForm2" action="BookNow.asp?" method="get" style="margin-top:0px auto">
<select data-inline="true" name="lang" id="langId2" data-native-menu="false" >
<option value="1972" SELECTED>Something Already Selected</option>
<option value="1973">Something Else</option>
</select>
</form>
<script>
$(document).on('pageinit', '#sbePage2' ,function () {
$(document).off('change', '#langId2').on('change', '#langId2',function (event) {
$.mobile.changePage('en.html', {
type: 'get',
data: ''
});
});
});
</script>
</div><!-- /page -->
</body>
</html>
虽然我理解你的愿望，但我仍然必须告诉你这是不可能的。在当前示例中，您不能拥有与jQuery Mobile具有相同ID的2个页面。考虑一下，你将有2个页面，其中相同的ID被加载到DOM中。每当您尝试访问页面DIV时，您将始终访问第一页，因为它是第一页。
如果要创建多语言页面，则不需要多个html页面。只需寻找一个好的jQuery多语言插件。
另一方面，如果关闭ajax，你可以做你想要的但你会松开动画过渡。
<强> en.html：
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script language="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<div data-role="page" id="sbePage1en">
<h3>this is english</h3>
<form name="langFormEn" id="langFormEn" action="BookNow.asp?" method=get style="margin-top:0px auto">
<select data-inline="true" name="lang" id="langId" data-native-menu="false" >
<option value="1972" SELECTED>Something Already Selected</option>
<option value="1973">Some Sort of Change</option>
</select></form>
<script>
$("#sbePage1en").live('pageshow', function () {
$('#langFormEn').bind('change', function (event) {
$.mobile.changePage('de.html', {
type: 'get',
data: ''
});
});
});
</script>
</div><!-- /page -->
</body>
</html>
<强> de.html
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script language="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<div data-role="page" id="sbePage1de">
<h3>this is german</h3>
<form name="langFormDe" id="langFormDe" action="BookNow.asp?" method=get style="margin-top:0px auto">
<select data-inline="true" name="lang" id="langId" data-native-menu="false" >
<option value="1972" SELECTED>Something Already Selected</option>
<option value="1973">Something Else</option>
</select></form>
<script>
$("#sbePage1de").live('pageshow', function () {
$('#langFormDe').bind('change', function (event) {
$.mobile.changePage('en.html', {
type: 'get',
data: ''
});
});
});
</script>
</div><!-- /page -->
</body>
</html>