如何解决在多页jQuery移动应用程序中注册事件？
| 我对jquery-mobile非常陌生。有人可以帮助解决有关多页应用程序的以下问题吗？ 我的应用有两个页面，分为两个不同的文件-下方给出的index2_1.html和index2_2.html。当我使用$ .mobile.changePage（\“ index2_2.html \”，\“ slide \”）;切换到第二页，第二页中的所有事件都不会绑定。实际上，第二页上的任何Javascript都不会执行。但是，如果使用链接移至第二页<a href=\"index2_2.html\" target=\"_blank\">Link to 2nd page that works1</a>
<!DOCTYPE html>
<html>
<head>
<title>Account Diary Mobile</title>
<link rel=\"stylesheet\" href=\"http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css\" />
<script src=\"http://code.jquery.com/jquery-1.5.2.min.js\"></script>
<script src=\"http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js\"></script>
<script>
alert(\"Trying to register events on page 1.\");
$(function() {
$(\".category_item\").bind(\"tap\",function(event) {
selected_category = $(this).text();
$(\"#selected_category\").text(selected_category);
$.mobile.changePage(\"index2_2.html\",\"slide\");
});
});
</script>
</head>
<body>
<div data-role=\"page\" id=\"select_category\">
<div data-role=\"header\" data-backbtn=\"false\">
<h1>Select Category</h1>
</div><!-- /header -->
<div data-role=\"content\">
<ul data-role=\"listview\" data-theme=\"g\">
<li class=\"category_item\"><a href=\"\">Grocery</a></li>
<li class=\"category_item\"><a href=\"\">Car</a></li>
<li class=\"category_item\"><a href=\"\">Recreation</a></li>
<li class=\"category_item\"><a href=\"\">Health</a></li>
</ul>
<div>
<a href=\"index2_2.html\" target=\"_blank\">Link to 2nd page that works1</a>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Account Diary Mobile</title>
<link rel=\"stylesheet\" href=\"http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css\" />
<script src=\"http://code.jquery.com/jquery-1.5.2.min.js\"></script>
<script src=\"http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js\"></script>
<script>
alert(\"Trying to register events on page 2.\");
$(function() {
$(\".description_item\").bind(\"tap\",function(event) {
selected_description = $(this).text();
$(\"#expense_description\").val(selected_description);
description = $(\"#expense_description\").val();
$.mobile.changePage($(\"#enter_amount\"),\"slide\");
});
});
</script>
</head>
<body>
<div data-role=\"page\" id=\"enter_description\">
<div data-role=\"header\" data-backbtn=\"false\">
<h1>Enter/Select Description</h1>
</div><!-- /header -->
<div data-role=\"content\">
<label for=\"name\">Description:</label>
<input type=\"text\" name=\"expense_description\" id=\"expense_description\" value=\"\" />
<a id=\"n_button\" href=\"#\" data-role=\"button\" data-theme=\"b\" data-inline=\"true\" >Next</a>
<ul data-role=\"listview\" data-inset=\"true\" data-theme=\"c\" data-dividertheme=\"b\">
<li data-role=\"list-divider\">Recent Expenses</li>
<li><a class=\"description_item\" href=\"\">Safeway</a></li>
<li><a class=\"description_item\" href=\"\">Gas</a></li>
<li><a class=\"description_item\" href=\"\">Cell phone bill</a></li>
<li><a class=\"description_item\" href=\"\">rent</a></li>
</ul>
<div data-role=\"controlgroup\" data-type=\"horizontal\">
<center>
<a class=\"cancel_button\" href=\"index.html\" data-role=\"button\" rel=\"external\">Cancel</a>
</center>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
解决方法
与Pravat Maskey的回答相反，有可能（且取决于所用的用例）具有单独的HTML文件。试想一下，一个巨大的应用程序具有许多页面，那么将所有内容预先加载会违反直觉。
我认为您遇到的问题是JavaScript代码的位置。我会尝试在页面的关闭div上方的页面部分中包含页面特定的代码（脚本标记及其包含的所有内容）。有关更多详细信息，请查看此指南：http://jqx.ca/nav/，然后检查“ jQuery Mobile Pages中的脚本”部分。
通过将标签放在正文中，第一次创建子页面时，代码将执行一次。对于您的情况，这应该可行，因为您将事件绑定到仅需要运行一次的DOM节点。
如果想在每次显示页面时都运行代码，也可以尝试使用pagebeforeshow事件注册代码。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。