Jquery Mobile을 사용하여 사이트의 다른 페이지에서 동일한 ID와 충돌합니다.

Question

쿼리 모바일을 사용하여 기존 사이트의 모바일 버전을 만들고 있습니다. 이 사이트는 www 버전에 잘 작동하는 확립 된 마크 업과 함께 수백 페이지가 넘습니다. 문제는 #useername 또는 #map 또는 #photo와 같은 모든 페이지에 동일한 요소 ID의 인스턴스가 많다는 것입니다. 이것은 각 페이지가 독립적으로로드되므로 충돌이 없으므로 www에서 잘됩니다. JQM에서는 모든 페이지가 어떻게 든 캐시되고 코드가 이전 페이지를 참조하는 것처럼 보입니다. 예를 들어 :

Page1.html

는

<div id="commonIdOnEveryPage">Page 1</div> 
<a href="page2.html">Link</a> 
<script> 
alert($("#commonIdOnEveryPage").html()); 
</script> 

Page2.html

<div id="commonIdOnEveryPage">Page 2</div> 
<script> 
alert($("#commonIdOnEveryPage").html()); 
</script> 

2 페이지로 이동하기 1 페이지에서 링크를 클릭하면, 경고는 여전히 "페이지 1"을 보여줍니다.

이 예에서는 두 번째 페이지의 id를 쉽게 변경할 수 있지만 실제 사이트에서는 동일한 ID가 사용되고 JS가 수천 줄의 linea 길이 인 다른 페이지에 수백 개의 위치가 있습니다. 확실히 JQM을 이와 호환되도록 만드는 방법이 있습니다.

Answer 1

캐시에서 이전 페이지를 제거하지만 뒤로 버튼과 전환을 유지하는 것으로 보이는이 코드를 발견했습니다.

$('div').live('pagehide', function(event, ui) { 
    $(event.target).remove(); 
}); 

Answer 2

대신 공통 클래스를 사용하십시오. jQuery Mobile은 한 번에 DOM에 둘 이상의 페이지를 가지고있어서 "고유 한"ID가 고유하지 않습니다.

$(".ui-page-active .commonclass").html() 

편집 : 아이디의 고유 할 수없는 경우

는 차선책은 다음과 같습니다 당신은 JQM의 페이지를 탐색 할 때

$(".ui-page-active div[id=commonid]").html() 

Answer 3

By default이 프레임 워크의 내용을로드 페이지를 ajax를 통해 호출하여 DOM에 연결하므로 페이지 당 여러 개의 ID로 끝납니다. 또한 link to a page을 사용하여 정상적으로 페이지를로드합니다. http 'rel = "external"or data-ajax = "false"`문제를 해결해야한다고 생각하면 적절한 js 파일이 있는지 확인해야합니다. 각 페이지의 머리에서 연결해.

Answer 4

겠습니까 사용 :

$(document).ready(function(){ 
    alert('#commonIdOnEveryPage'); 
}); 

수정을?

Answer 5

톰 킨케이드의 답변은 프로 팁입니다.

은

단지에 조금 그것을 청소 : 1) 캐시에서 모든 사업부를 제거하는 오버 헤드를 줄이고, 2)

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

이제 새로운 JQuery와 규칙으로 최신으로 가져 캐시는 제거되고 이전 페이지 및 뒤로 버튼 기능이 유지됩니다.

Answer 6

시간을 기준으로 고유 한 문자열을 만들고 모든 ID에 추가합니다.이어서 HTML 출력의

// unique string for use in DOM ids 
$unique = str_replace(array(' ', '.') ,'_', microtime()); 

:

<div id="commonIdOnEveryPage<?php echo $unique; ?>">Page 2</div> 
<script> 
alert($("#commonIdOnEveryPage<?php echo $unique; ?>").html()); 
</script>