2012-03-27 1 views
5

Ho 2 pagine che ho collegato usando swipeleft e swiperight event (avanti e indietro) ma quando passo l'altra pagina, jquery non attiva l'evento pageinit e mi rimane solo l'intestazione e piè di pagina. Dovrei utilizzare l'evento changePage o dovrei utilizzare l'evento loadPage? So che c'è un bug nell'altra versione di jquerymobile in cui l'evento pageinit non si attiva ma sto già usando l'RC1 che lo ha già risolto ma l'evento non si sta ancora attivando. cosa gli impedisce di sparare? Grazie in anticipo.jquery pageinit non sparato

codice è il seguente:

 <!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--> 

risposta

6

Cambia pagina è ciò che stai cercando. Carica la pagina appena carica in dom in modo da poter manipolare prima di mostrare effettivamente la pagina.

Quando si esegue il binding alla pagina init, assicurarsi di associare l'evento pageinit utilizzando un ID univoco. Non possono entrambi avere id = "# indice". Assicurati inoltre di associare la pagina init a ciascuna pagina. Il tuo codice avrebbe attivato solo il pageinit solo per la pagina #index e non per il teamliquid.html.

Usare la seguente nel <head></head> dei vostri documenti:

$(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" }); 
}); 

o per ottenere pageinit per il fuoco per ogni pagina

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

Come di jQuery 1.7 legano, dal vivo, e delegato tutto utilizzare la .on() metodo. È il metodo consigliato per legare il tuo pageinit a JQM. Puoi anche fare cose interessanti come sostituire "#index" con "[data-role = page]" per far scatenare il tuo codice su ogni pagina. Ecco un JSfiddle che dimostra che questo ha funzionato davvero. http://jsfiddle.net/codaniel/cEWpy/2/

+0

questo è probabilmente quello che sto cercando, ma appena realizzato che Windows Phone 7 divario telefonico non supporta gli eventi di scorrimento. :(grazie per l'aiuto, molto apprezzato. –

-1

tenta di utilizzare
$(function() { /* dom ready */ });
invece di
$('#index').bind("pageinit", (function() { ... }));

Quindi è possibile inserire lo script-tag all'interno della testa-tag, eliminare il orfano </script> sulla linea 9 e hai un HTML pulito e tutto funzionerà bene.