동일한 ID를 가진 여러 div 방지하기

여러 html 문서를 사용하는 jquery-mobile 프로젝트에 문제가 있습니다. 전제는 정상적인 흐름인데, 사용자는 홈 페이지에 들어가서 다른 두 페이지 (icon_view, detail_view) 중 하나에 연결됩니다. 거기에서 사용자는 "문자"를 선택할 수 있습니다. jQM을 이해하면 홈 페이지가로드되고 icon_view 또는 detail_view에 대한 링크를 클릭하면 HTML이로드되고 < 제목 > 및 < div data-role = "page">을 제외한 모든 부분이 제거되고 DOM에 배치됩니다. 이것은 잘 작동합니다. 사용자가 문자 중 하나를 클릭하면 다시 발생합니다. < div data-role = "page"id = "CH-page">은 DOM에 삽입 된 div입니다. 뒤로를 클릭 한 다음 다른 문자를 선택하면 모든 것이 효과적입니다. 사용자가 문자 페이지를 즐겨 찾기에 추가하고 다른 문자 페이지로 이동하려고 시도하면 DOM에 다시 추가 된 두 번째 < div data-role = "page"id = "CH-page">이있는 것처럼 보입니다. 개체의 ID에 의한 조작은 효과가 없습니다. (첫 번째 인스턴스가 변경되었지만 보이지 않기 때문입니다.) 내 질문은 탐색에 어떻게 내 문서에서 < div data-role = "page"id = "CH-page">을 방지 할 수 있습니까?동일한 ID를 가진 여러 div 방지하기

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

출처

2017-03-24 Brian bcr666 Ray

단일 페이지 모델의 jQM 1.4 버그입니다. ID보다는 클래스를 사용하는 것이 좋습니다. 또한 항상'$ .mobile.pageContainer.pagecontainer ("getActivePage")'를 사용하여 활성 페이지를 참조하십시오. 편집 : 시도해보십시오 https://jsfiddle.net/Palestinian/a85fxf1r/ – Omar

해결 방법 : http://stackoverflow.com/a/26834528/1771795 – Omar

위에서 언급 한 해결책을 시도해 보셨습니까? – Omar

가 대신 가능한 문서 트리에를 떠날 숨겨진 경우 모든 페이지를 제거합니다이 코드.

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

출처

2017-04-05 02:05:02

동일한 ID를 가진 여러 div 방지하기

답변

관련 문제