jquery 모바일 사이트에서 요소를 자동으로로드하는 함수를 호출하는 방법

Question

내가 원하는 것은 쉬운 편집을 위해 한 곳에서 내 navbar HTML 마크 업을 사용하는 것입니다. 는 지금 내 index.html을 본문 내용과 같이 보인다 :

<div data-role="page" id="SomePage"> 
    <div data-role="header"> 
     <h1>This is Page 1</h1> 
    </div> 
    <div data-role="navbar"></div> 
</div> 

과 같은 헤더에 내 파일을 호출 오전 : 나는에 노력하고 어디에 내 app.js 파일에

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
<script type="text/javascript" language="javascript" src="app.js"></script> 

것은 탐색 바를로드하십시오. 나는 2 가지 방법

을 시도 첫 번째 :

var NavBar = function() { 
$('div[data-role="navbar"]').html('<ul>' + 
    '<li><a href="#SomePage" data-transition="fade" data-icon="none">By Brand</a></li>' + 
    '<li><a href="#AnotherPage" data-transition="fade" data-icon="none">By Flavor</a></li>' + 
    '<li><a href="#LastPage" data-transition="fade" data-icon="none">Zero Nicotine</a></li>' + 
    '</ul>'); 
} 

$(document).ready(function() { 
    NavBar(); 
}); 

이 내 링크를 표시하는 응용 프로그램을 얻기 페이지에서 발생하지만, 목록 스타일이없는 일반 UL처럼 쌓아되는

내가 시도한 두 번째 방법은 다음과 같습니다.

var NavBar = function() { 
$('div:jqmData[role="navbar"]').html('<ul>' + 
    '<li><a href="#SomePage" data-transition="fade" data-icon="none">By Brand</a></li>' + 
    '<li><a href="#AnotherPage" data-transition="fade" data-icon="none">By Flavor</a></li>' + 
    '<li><a href="#LastPage" data-transition="fade" data-icon="none">Zero Nicotine</a></li>' + 
    '</ul>'); 
} 

$(document).ready(function() { 
    NavBar(); 
}); 

이렇게하면 링크가 전혀 표시되지 않습니다.

'navbar'를 한 곳에서로드하고 jQuery 모바일 스타일을 사용하는 함수를 어떻게 만듭니 니? 페이지가 DOM에로드되기 전에

Answer 1

document ready가 jQuery Mobile에 사용하지 마십시오, 그것은 일반적으로 트리거합니다. 이 주제에 대해 더 자세히 알아 보려면 ARTICLE 또는 HERE을 찾으십시오.

대신 jQuery Mobile 페이지 이벤트를 사용해야합니다.

나는 당신을 jsFiddle로 만들었습니다. example. . 여기에 설명 된대로

$(document).on('pagebeforecreate', '#index', function(){  
    $('[data-role="navbar"]').html('<ul>' + 
     '<li><a href="#SomePage" data-transition="fade" data-icon="none">By Brand</a></li>' + 
     '<li><a href="#AnotherPage" data-transition="fade" data-icon="none">By Flavor</a></li>' + 
     '<li><a href="#LastPage" data-transition="fade" data-icon="none">Zero Nicotine</a></li>' + 
     '</ul>'); 
});