Birden çok html dokümanı kullanan bir jquery-mobile projesinde sorun yaşıyorum. Bu öneri, normal akış, bir kullanıcının ana sayfaya gireceği ve daha sonra diğer iki sayfadan birine bağlandığıdır (icon_view, detail_view). Oradan kullanıcı bir "karakter" seçebilir. JQM anlayışım, ana sayfanın, icon_view veya detail_view öğesine bir link tıklandığında yüklendiği, HTML'nin yüklendiği ve title > ve < div data-role = "page" > dışındaki her şeyin kaldırıldığı ve DOM içine yerleştirilir. Bu iyi çalışıyor. Kullanıcı < div data-role = "sayfa" kimliğinden birini tıklattığında bu yeniden olur. "" CH-page "> DOM'a eklenen div. Geri tıklarsam ve başka bir karakter seçerseniz, her şey harika çalışır. Ancak, kullanıcı bir karakter sayfasını işaretlediğinde ve başka bir karakter sayfasına gitmeye çalıştığında, DOM'a yeniden eklenen ikinci bir < div veri rolü = "sayfa" id = "CH-sayfası" > var gibi görünür ve Nesnelerin kimliğine göre herhangi bir manipülasyonun hiçbir etkisi yoktur. (Bunun, 1. örneğin değiştirilmekte olduğu, ancak görünmediği için olduğunu tahmin ediyorum). Sorum şu: Gezinme sırasında birden çok < div data-role = "page" id = "CH-page" >'u nasıl önleyebilirim?Aynı kimliğe sahip birden çok div önleme
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); });
}
Tek sayfa modelinde jQM 1.4'deki bir hata budur. Kimlikler yerine sınıf kullanmayı öneririm. Ayrıca, her zaman $ .mobile.pageContainer.pagecontainer ("getActivePage") 'kullanarak aktif sayfaya bakın. Düzenleme: Bu https://jsfiddle.net/Palestinian/a85fxf1r/ – Omar
bir geçici çözüm deneyin: http://stackoverflow.com/a/26834528/1771795 – Omar
Yukarıda belirtilen olası çözümleri denediniz mi? – Omar