防止具有相同 id 的多个 div
Prevent multiple divs with same id
我在使用多个 html 文档的 jquery-移动项目中遇到问题。前提是正常流程，用户会进入主页，然后 link 到其他两个页面之一（icon_view、detail_view）。从那里用户可以 select a "character"。我对 jQM 的理解是加载主页，当单击 link 到 icon_view 或 detail_view 时，加载 HTML 并且除
之外的所有内容和 <div data-role="page"> 被剥离，并且被放入 DOM。这工作正常。当用户单击其中一个字符 <div data-role="page" id="CH-page"> 是插入到 [=39= 中的 div 时，会再次发生这种情况].如果我单击返回，然后单击 select 另一个字符，一切正常。但是，当用户为一个角色页面添加书签并尝试导航到另一个角色页面时，似乎添加了第二个 <div data-role="page" id="CH-page">再次到 DOM，并且通过对象 ID 进行的任何操作似乎都没有效果，（我猜这是因为第一个实例是被更改的实例，但不可见）。我的问题是导航如何防止多个 <div data-role="page" id="CH-page"> 在我的文档中？</p>
<p>character.php</p>
<pre><code><?php
$date = new DateTime();
$ts = "?x=" . $date->getTimestamp();
$typeId = $_GET["typeId"];
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HARDAC - Character</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/themes/borg.css" />
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="css/hardac.css<?php echo $ts ?>" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/index_data.js<?php echo $ts ?>"></script>
<script type="text/javascript" src="js/hardac.js<?php echo $ts ?>"></script>
</head>
<body>
<div data-role="page" id="CH-page">
<link rel="stylesheet" type="text/css" href="css/character.css<?php echo $ts ?>" />
<script type="text/javascript" src="js/character.js<?php echo $ts ?>"></script>
<div data-role="header" data-position="fixed">
<div class="ui-btn-left">
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-btn-icon-notext ui-btn-inline ui-icon-carat-l">Back</a>
<a href="index.php" class="ui-btn ui-corner-all ui-btn-icon-notext ui-btn-inline ui-icon-home"></a>
</div>
<h1>HARDAC - Character</h1>
</div> <!-- data-role="header" -->
<div class="ui-content" id="CH-content">
<div>
<div class="CH-picture">
<img src="" alt="" name="CH-picture" id="CH-picture"/>
</div>
</div>
<div data-role="field-contain">
<label for="CH-player-name">Player Name:</label>
<input type="text" name="CH-player-name" id="CH-player-name" placeholder="Player Name"/>
</div>
<div data-role="field-contain">
<label for="CH-character-name">Character Name:</label>
<input type="text" name="CH-character-name" id="CH-character-name" placeholder="Character Name"/>
</div>
<div data-role="field-contain">
<label for="CH-creature-type" class="select">Creature Type:</label>
<select name="CH-creature-type" id="CH-creature-type">
<option value="0">Unknown</option>
<option value="1">Changeling</option>
<option value="2">Werewolf</option>
</select>
</div>
<div data-role="field-contain">
<label for="CH-virtue" class="select">Virtue:</label>
<select name="CH-virtue" id="CH-virtue">
<option value="0">Unknown</option>
<option value="3">Charity</option>
<option value="4">Faith</option>
<option value="5">Fortitude</option>
<option value="6">Hope</option>
<option value="7">Justice</option>
<option value="8">Prudence</option>
<option value="9">Temperance</option>
</select>
</div>
<div data-role="field-contain">
<label for="CH-vice" class="select">Vice:</label>
<select name="CH-vice" id="CH-vice">
<option value="0">Unknown</option>
<option value="10">Envy</option>
<option value="11">Gluttony</option>
<option value="12">Greed</option>
<option value="13">Lust</option>
<option value="14">Pride</option>
<option value="15">Sloth</option>
<option value="16">Wrath</option>
</select>
</div>
<?php
if ($typeId == 1) {
include("changeling.php");
} else if ($typeId == 2) {
include("werewolf.php");
}
?>
</div>
</div> <!-- class="ui-content" -->
<div data-role="footer">
</div> <!-- data-role="footer" -->
</div> <!-- data-role="page" -->
</body>
</html>
</code></pre>
<p>character.js</p>
<pre><code>var character = null;
var player = null;
$(document).off("pageinit", "#CH-page").on("pageinit", "#CH-page", function (event) {
var parameters = $(this).data("url").split("?")[1];
var characterId = getUrlParameter(parameters, "characterId"); // gets characterId either from jQM or browser url
character = getCharacter(characterId);
player = getPlayer(character.playerId);
fillSelect("CH-creature-type", character.typeId);
fillSelect("CH-vice", character.viceId);
fillSelect("CH-virtue", character.virtueId);
if (player.picture) {
$("#CH-picture").attr("src", "img/" + player.picture + "");
}
$("#CH-picture").attr("alt", player.name);
$("#CH-player-name").val(player.name);
$("#CH-character-name").val(character.name);
$("#CH-page").trigger("create");
});
function fillSelect(selectId, selectedId) {
$("#" + selectId).each(function(){ $(this).val(selectedId); });
}
</code></pre>
</section>
<div>
<section class="answer">
<p>此代码将删除隐藏的任何页面，而不是可能将其留在文档树中。</p>
<pre><code>$(document).on('pagehide', '.ui-page', function(event, ui) {
$(event.target).remove();
});
</code></pre>
</section>
</div>
</div>
<div class="line"></div>
<div id="footer">©2023 WhoseBug</div>
</body>
</html>
我在使用多个 html 文档的 jquery-移动项目中遇到问题。前提是正常流程，用户会进入主页，然后 link 到其他两个页面之一（icon_view、detail_view）。从那里用户可以 select a "character"。我对 jQM 的理解是加载主页，当单击 link 到 icon_view 或 detail_view 时，加载 HTML 并且除