jquery의 바인드 페이지 인서 터 함수에 대한 도움이 필요합니다.

Question

아약스로로드하는 서브 페이지에서 작업하기 위해 index.html 파일에서 작동하는 스크립트를 얻는 방법을 이해하려면 도움이 필요합니다.

내 색인 파일에는 해당 페이지에서 작동하는 스크립트가 있습니다. 좋습니다. 그리고 이제 -ajax-jquery를 사용하여로드하는 seperat html 페이지로 작업하기를 원합니다.

나는 .bind ('pageInserted'같은 것을 사용할 필요가 있다고 생각 .....하지만 난 잘 모릅니다.

이

스크립트는 모두 위/아래로 모두 div의 스크롤하게하고 밀어 수 있습니다 . 다시/요새

내 인덱스 파일에있는 (그리고이 작동) 스크립트는 다음과 같습니다

var page_flip, vertical_scroll,myScroll, 
    disable_h = disable_v = false, 
    prev_page = prev_x = prev_y = 0, 
    pages; 

function loaded() { 
    setTimeout(function() { 
     pages = document.querySelectorAll('.scroller'); 

     page_flip = new iScroll('pageflip', { 
      hScrollbar: false, 
      vScrollbar: false, 
      snap:true, 
      momentum:false, 
      onScrollEnd: updateVerticalScroller 
     }); 

     vertical_scroll = new iScroll(pages[page_flip.pageX], { 
      hScrollbar: false, 
      vScrollbar: false 
     }); 



     // Free some mem 
     window.removeEventListener('load', loaded, false); 
    }, 100); 
} 

function updateVerticalScroller() { 
    prev_x = vertical_scroll.x; 
    prev_y = vertical_scroll.y; 

    if (page_flip.pageX!=prev_page) { 
     if (page_flip.pageX == 0) 
      highlightStartPageButton(); 
     else if (page_flip.pageX == 1) 
      highlightMenuButton(); 

     vertical_scroll = vertical_scroll.destroy(); 
     pages[prev_page].style.webkitTransitionDuration = '0'; 
     pages[prev_page].style.webkitTransform = 'translate3d(' + prev_x + 'px, ' + prev_y + 'px, 0)'; 
     vertical_scroll = new iScroll(pages[page_flip.pageX], { 
      hScrollbar: false, 
      vScrollbar: false 
     }); 
     prev_page = page_flip.pageX; 
    } 
} 

인덱스 파일의 div의는 다음과 같습니다

<div id="pagewrapper"> 
    <div id="pageflip"> 


<div class="scrollerwrapper"> 
<div class="scroller"> 

content in div1 (page1) goes here......... 

</div> 
</div> 

<div class="scrollerwrapper"> 
<div class="scroller"> 

content in div2 (page2) goes here......... 

</div> 
</div> 


</div> 
</div> 

이

<div id="wrapper22" class="scrollerwrapper">--need this for the iscroll to work 
<div id="mag1" class="scroller2">--need this for the iscroll to work 


<div id="pagewrapper"> 
<div id="pageflip"> 


<div class="scrollerwrapper"> 
<div class="scroller"> 

content in div1 goes here......... 

</div> 
</div> 


<div class="scrollerwrapper"> 
<div class="scroller"> 

content in div2 goes here......... 

</div> 
</div> 

</div> 
</div> 


</div> 
</div> 

난 정말 도움이 appriciate 것이다 : 나는이 스크립트 작업 할

서브 페이지 demo.html 작동하는 iscroll 스크립트의 상단에있는 인덱스 파일 +이 개 된 div에서 div의 모양 이것을 고치고 작동시키는 방법을 알기 위해서. 감사합니다.

Answer 1

AJAX를 통해 페이지를로드하려면 jQuery의 .load()을 사용하고 있습니까? Here's .load()에 대한 문서

$('#result').load('ajax/test.html', function() { 
    alert('Load was performed.'); 
}); 

Answer 2

안녕 roflwaffle I 임 (자사의 모바일 앱) 페이지를로드하는 jqtouch와 jQuery를 사용하여, 나는 :-) 오전 추측 : 그것은 콘텐츠가로드 된 경우에 대한 콜백 당신에게 설정을 할 수 있습니다. 이 스크립트를 사용하여 하위 페이지에서 iscroll을 작동하게하려면 다음을 수행하십시오.

var myScroll; 
$(document.body).ready(function(){ 
    $('#hem').load('home/home1.asp'); 
    loaded(); 
    $(this).bind('pageInserted', function(event, info) { 

     var $inserted = info.page; 
     var $scroll = $inserted.find('.scroller2'); 

     var elm = $inserted.find(".scrollerwrapper");//document.getElementById('wrapper2'); 
     if (elm != null) 
      elm.css("height", window.innerHeight);//elm.style.height = window.innerHeight + "px"; 

     myScroll= new iScroll($scroll.attr("id"), {desktopCompatibility:true,hScrollbar: false,vScrollbar: false}); 

    }); 
});