2012-03-27 4 views
5

swipeleft와 swiperight 이벤트를 사용하여 링크 된 두 페이지가 있지만 다른 페이지로 스 와이프하면 jquery가 pageinit 이벤트를 발생시키지 않고 헤더와 보행인. changePage 이벤트를 사용해야합니까, 아니면 loadPage 이벤트를 사용해야합니까? 나는 pageinit 이벤트가 시작되지 않는 다른 버전의 jquerymobile에 버그가 있음을 알고 있지만 이미 이미 해결했지만 이벤트는 여전히 실행되지 않는 RC1을 사용하고 있습니다. 발사를 멈추고있는 게 뭐야? 미리 감사드립니다.jquery pageinit not firing

 <!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<title>esports</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" /> 
<link rel="stylesheet" href="jquery.zrssfeed.css" /> 
</script> 

<style> 


</style> 
</head> 
<body> 
<!-- index --> 
<div data-role="page" id="index"> 
    <div data-role="header"> 
     <h1>esports times</h1> 
    </div> 
    <!--/header--> 
    <div data-role="content" id="content"> 
     <div id="currentFeed">teamliquid. &nbsp; skgamin</div> 
     <ul id="rssFeed" data-role="listview"> 
     </ul> 
    </div> 
</div> 

</body> 
</html> 

<!-- load javscripts here--> 
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js">  </script> 
<script src="jquery.zrssfeed.js"></script> 
<script> 
    $('#index').bind("pageinit", (function() { 
     $('#rssFeed').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', { 
      limit: 10, 
      date: false, 
     }); 
    })); 

    $('#index').bind("swipeleft", function() { 
     $.mobile.changePage("teamliquid.html", "slide", true, false); 
    }); 
</script> 

<!-- /javascript--> 

답변

6

변경 페이지는 귀하가 찾고자하는 것입니다. 페이지를로드하면 실제로 DOM에로드되므로 실제로 페이지를 표시하기 전에 조작 할 수 있습니다.

페이지 초기화시 바인딩 할 때 고유 ID를 사용하여 pageinit 이벤트를 바인딩해야합니다. 둘 다 id = "# index"를 가질 수는 없습니다. 또한 각 페이지에 페이지 초기화를 바인드해야합니다. 귀하의 코드는 #index 페이지에만 적용되며 teamliquid.html에는 적용되지 않습니다. ,

$(document).on('pageinit','#index', function(){ 
    $('#rssFeed').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', { 
     limit: 10, 
     date: false, 
    }); 
}); 
$(document).on('pageinit','#otherpage', function(){ 
    ... This would be for the other page you are referring to.... 
}); 
$(document).on('swipeleft','#index', function(){ 
    $.mobile.changePage("teamliquid.html", { transition: "slide" }); 
}); 
$(document).on('swiperight','#otherpage', function(){ 
    $.mobile.changePage("index.html", { transition: "slide" }); 
}); 

또는 JQuery와 1.7 바인드 기준으로 모든 페이지

$(document).on('pageinit','[data-role=page]', function(){ 
    ....ground breaking code...  
}); 

에 대한 화재에 대한 pageinit을 얻기 위해 살고, 위임 모두를 사용

를 사용하여 문서의 <head></head>에서 다음 .on() 메소드. 그것은 JQM을위한 당신의 pageinit을 묶는 추천 된 방법이다. 또한 '#index'를 '[data-role = page]'로 바꾸는 등 멋진 작업을 수행하여 모든 페이지에서 코드를 실행시킬 수 있습니다. JSfiddle이 실제로 작동한다는 것을 보여줍니다. http://jsfiddle.net/codaniel/cEWpy/2/

+0

이것은 아마도 내가 찾고있는 것이지만 단지 윈도우 7 전화 틈새가 스 와이프 이벤트를 지원하지 않는다는 것을 깨달았습니다. :(도움을 주셔서 감사합니다, 많이 감사합니다. –

-1

시도 라인 9 고아 </script>을 삭제, 그럼 당신은 머리 태그 내부에 스크립트 태그를 넣을 수 있습니다 대신
$('#index').bind("pageinit", (function() { ... }));


$(function() { /* dom ready */ });
을 사용하기 :

코드는 다음과 같다 그리고 당신은 깨끗한 HTML을 가지고 있으며 모든 것이 잘 동작 할 것이다.