jquery 모바일 스 와이프 기능은 페이지 새로 고침 후에 만 ​​작동합니다.

Question

ipad에서 사이드 위젯 제스처에 jquery 모바일을 사용하고 있습니다.

아래 코드는 내 html 파일에서 참조하는 파일에 있습니다.

내 HTML 파일이 있습니다

<div data-role="page" id="device1"> 
<!--content for this part of html page --> 
</div> 
<!--more divs with incrementing id --> 
<div data-role="page" id="device4"> 
<!--content for this part of html page --> 
</div> 

이 형식은 여러 HTML 파일에 사용됩니다.

나는이 코드를 사용하여 (stackoverflow에 있음) - 이전 스레드에 게시하고 싶지 않습니다.

$(document).ready(function() { 

    $('.ui-slider-handle').on('touchstart', function(){ 
     // When user touches the slider handle, temporarily unbind the page turn handlers 
     doUnbind(); 
    }); 

    $('.ui-slider-handle').on('mousedown', function(){ 
     // When user touches the slider handle, temporarily unbind the page turn handlers 
     doUnbind(); 
    }); 

    $('.ui-slider-handle').on('touchend', function(){ 
     //When the user let's go of the handle, rebind the controls for page turn 
     // Put in a slight delay so that the rebind does not happen until after the swipe has been triggered 
     setTimeout(function() {doBind();}, 100); 
    }); 

    $('.ui-slider-handle').on('mouseup', function(){ 
     //When the user let's go of the handle, rebind the controls for page turn 
     // Put in a slight delay so that the rebind does not happen until after the swipe has been triggered 
     setTimeout(function() {doBind();}, 100); 
    }); 

    // Set the initial window (assuming it will always be #1 
    window.now = 1; 

    //get an Array of all of the pages and count 
    windowMax = $('div[data-role="page"]').length; 

    doBind(); 
}); 


// Functions for binding swipe events to named handlers 
function doBind() { 
    $('div[data-role="page"]').on("swipeleft", turnPage); 
    $('div[data-role="page"]').on("swiperight", turnPageBack); 
} 

function doUnbind() { 
    $('div[data-role="page"]').die("swipeleft", turnPage); 
    $('div[data-role="page"]').die("swiperight", turnPageBack); 
} 

// Named handlers for binding page turn controls 
function turnPage(){ 
    // Check to see if we are already at the highest numbers page    
    if (window.now < windowMax) { 
     window.now++ 
     $.mobile.changePage("#device"+window.now, "slide", false, true); 
    } 
} 

function turnPageBack(){ 
    // Check to see if we are already at the lowest numbered page 
    if (window.now != 1) { 
     window.now--; 
     $.mobile.changePage("#device"+window.now, "slide", true, true); 
    } 
} 

// Named handlers for binding page turn controls 
function navigate_without_swipe(page){ 
    // Check to see if we are already at the highest numbers page    
    $.mobile.changePage("#device"+page, "slide"); 
} 

난 당신이 $ (문서)를 사용하고 있기 때문에이 자바 스크립트

Answer 1

을 작동하려면 페이지를 다시로드해야하는 이유 말해

가 JQuery와 이벤트 그게 전부 .ready하십시오.

JQuery Mobile은 AJAX를 사용하여 JQM에 의해 페이지가로드되기 때문에 이벤트가 실행되지 않음을 의미하므로 자체로드 이벤트가 있습니다.

아마 pageinit에서 그렇게하고 싶지만 설명서를 확인하여 상황에 맞는 적절한 이벤트가 있는지 확인하십시오.

JQuery Mobile documentation