Question

我在使用多个html文档的jquery-mobile项目中遇到问题。前提是正常流程，用户将进入主页，然后链接到另外两个页面之一（icon_view，detail_view）。用户可以从那里选择“角色”。我对jQM的理解是，加载主页，点击icon_view或detail_view的链接，加载HTML以及＆lt; title＆gt;以外的所有内容。和＆lt; div data-role =“page”＆gt;被剥离，并被放入DOM。这工作正常。当用户点击其中一个字符＆lt; div data-role =“page”id =“CH-page”＆gt;时，会再次发生这种情况。是插入DOM的div。如果我单击后退，然后选择另一个角色，一切都很好。当用户为字符页面添加书签并尝试导航到另一个字符页面时，似乎有第二个＆lt; div data-role =“page”id =“CH-page”＆gt;再次添加到DOM中，并且对象的ID的任何操作似乎都没有效果（我猜这是因为第一个实例是被更改的实例，但是不可见）。我的问题是在导航中如何防止多个＆lt; div data-role =“page”id =“CH-page”＆gt;在我的文件中？

character.php

<?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>

character.js

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); });
}

Answer 1

此代码会在隐藏任何页面时将其删除，而不是将其留在文档树中。

$(document).on('pagehide', '.ui-page', function(event, ui) { 
    $(event.target).remove();
});

防止具有相同ID

1 个答案: