jQuery 모바일 추가 HTML 코드

jQuery/jQuery 모바일을 사용하는 페이지에 일부 코드를 추가하고 싶습니다. 페이지를 방문 할 때마다 한 번만 추가하고 싶습니다.jQuery 모바일 추가 HTML 코드

** 최종 편집 **

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script> 

    <script> 
    //$(document).ready(function()     // get error when I use this 
    $('#page1').live('pageshow', function()     
     { 
      // alert("!"); 
       var section1 = "<p>some code for page 1...</p>";     
       myClone1 = $(section1);         
       myClone1.appendTo("#placeholder1").trigger('create'); 
     });    

    $('#page2').live('pageshow', function()     
     { 
      // alert("!"); 
       var section2 = "<p>some code for page 2...</p>"; 
       myClone2 = $(section2);     
       myClone2.appendTo("#placeholder2").trigger('create'); 

     });   
     </script> 

</head> 
<body> 
    <div data-role="page" id="page1">  
      <div data-role="content"> 
        <div data-role="navbar"> 
        <ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li> 
         <li><a data-icon="grid" data-transition="none" id="page2" href="#page2">page2</a></li>    
        </ul> 
        </div> 
       <div id="placeholder1">Page 1</div> 
      </div>  
    </div> 

    <div data-role="page" id="page2">  
      <div data-role="content"> 
        <div data-role="navbar"> 
        <ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li> 
        <li><a data-icon="grid" data-transition="none" id="page2" href="#page2">page2</a></li>         
        </ul> 
        </div> 
       <div id="placeholder2">Page 2</div> 
      </div> 
     </div>  
    </div> 


</body> 
</html>

출처

2011-08-11 mustapha george

2 분을주세요. 몇 가지 문제를 해결하고 싶습니다. !!!! –

몇 가지 변경됨, –

은 "pagecreate"로 변경 시도했습니다. –

실제로 추가하기 전에 추가 할 코드가 있는지 확인할 수 있습니다. 난 당신이 추가된다 단락 태그에 'appended_code'클래스를 추가

$('#page1').live('pageshow', function()     
{ 
    // alert("!"); 
    if ($(this).find('p.appended_code').length === 0) { 
     var section1 = "<p class='appended_code'>some code for page 1...</p>";     
     myClone1 = $(section1);         
     myClone1.appendTo("#placeholder1").trigger('create'); 
    } 
});

참고하고 내가 확인하는 데 사용되는 선택이다 : 페이지에 대한 후속 방문에 그런 식으로 데이터가 추가되지 않습니다 추가 된 코드의 존재.

--Update--

할 수도 있습니다 청소 코드는 숫자에 따라 명명 규칙을 사용하는 경우 조금 :

var pageData = new Array(); 
pageData[1] = "<p class='appended_class'>some code for page 1...</p>"; 
pageData[2] = "<p class='appended_class'>some code for page 2...</p>"; 
$('div[id^="page"]').live('pagebeforeshow', function() { 
    if ($(this).find('p.appended_class').length === 0) { 
     var page_num = $(this).attr('id').replace('page', ''); 
     $("#placeholder" + page_num).append(pageData[page_num]).trigger('create'); 
    } 
});

참고한다는와 div에 대한 div[id^="page"] 선택 검색 http://jsfiddle.net/S3wE6/1/

당신이 데이터에 추가 될하려면 : "페이지"여기

로 시작하는 ID는 나중에에 대한 jsfiddle입니다 초기로드 나는 데이터가 함수에 추가되고 호출되는 코드 라인을 만들 것을 권장한다. $(document).ready();

출처

2011-08-11 19:32:53 Jasper

+1 재스퍼의 요소 검사 방법이 존재합니다. –

이 조금 까다했지만 여기에 라이브 버전 확인 :

http://jsfiddle.net/phillpafford/QfjaE/27/

JS :

var elem_id; 
var appendToStatus = {}; 
appendToStatus['page1'] = true; 
appendToStatus['page2'] = true; 

$('div').live('pageshow', function() { 
    elem_id = $(this).attr('id'); 
    appendToStatus[elem_id] = fnCreateGroups(elem_id, appendToStatus[elem_id]); 
}); 

function fnCreateGroups(elem_id, appendToStatus) { 
    if(appendToStatus == true) { 
     var section = "<p>some code for " + elem_id + "...</p>"; 
     myClone = $(section);    
     myClone.appendTo("#" + elem_id + "_placeholder").trigger('create'); 
     return false; 
    }    
}

HTML :

<div data-role="page" id="page1">  
     <div data-role="content"> 
       <div data-role="navbar"> 
       <ul><li><a data-icon="home" data-transition="none" href="#page1">page1</a></li> 
        <li><a data-icon="grid" data-transition="none" href="#page2">page2</a></li>    
       </ul> 
       </div> 
      <div id="page1_placeholder">Page 1</div> 
     </div>  
</div> 

<div data-role="page" id="page2">  
    <div data-role="content"> 
      <div data-role="navbar"> 
       <ul><li><a data-icon="home" data-transition="none" href="#page1">page1</a></li> 
        <li><a data-icon="grid" data-transition="none" href="#page2">page2</a></li>    
       </ul> 
      </div> 
     <div id="page2_placeholder">Page 2</div> 
    </div> 
</div>

출처

2011-08-11 17:26:56

이것은 최소한의 변화만으로도 효과가있는 것처럼 보인다. pagecreate 이벤트에만 추가하십시오.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script> 

    <script> 
    $('#page1').live('pagecreate', function()    
     { 
       var section1 = "<p>some code for page 1...</p>";     
       myClone1 = $(section1);         
       myClone1.appendTo("#placeholder1").trigger('create'); 
     });    

    $('#page2').live('pagecreate', function()    
     { 
       var section2 = "<p>some code for page 2...</p>"; 
       myClone2 = $(section2);     
       myClone2.appendTo("#placeholder2").trigger('create'); 

     });   
     </script> 

</head> 
<body> 
    <div data-role="page" id="page1">  
      <div data-role="content"> 
        <div data-role="navbar"> 
        <ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li> 
         <li><a data-icon="grid" data-transition="none" id="page2" href="#page2">page2</a></li>    
        </ul> 
        </div> 
       <div id="placeholder1">Page 1</div> 
      </div>  
    </div> 

    <div data-role="page" id="page2">  
      <div data-role="content"> 
        <div data-role="navbar"> 
        <ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li> 
        <li><a data-icon="grid" data-transition="none" id="page2" href="#page2">page2</a></li>         
        </ul> 
        </div> 
       <div id="placeholder2">Page 2</div> 
      </div> 
     </div>  
    </div> 


</body> 
</html>

출처

2011-08-12 03:06:40 bob

jQuery 모바일 추가 HTML 코드

답변

관련 문제