jquery pageinit no disparando

Tengo 2 páginas que vinculé usando swipeleft y swiperight event (ida y vuelta) pero cuando deslizo el dedo a la otra página, jquery no activa el evento pageinit y me queda solo el encabezado y el pie de página. ¿Debería usar el evento changePage o debería estar usando el evento loadPage? Sé que hay un error en la otra versión de jquerymobile, donde el evento pageinit no se activa, pero ya estoy usando el RC1 que ya lo ha resuelto, pero el evento aún no se está disparando. ¿Qué es lo que le impide disparar? Gracias por adelantado.

El código es el siguiente:

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

Cambiar página es lo que estás buscando. Cargar página solo lo carga en dom para que pueda manipular antes de mostrar la página.

Al enlazar a la página init, asegúrese de vincular su evento pageinit con una identificación única. No pueden ambos tener id = "# index". También asegúrese de vincular página init a cada página. Su código solo tendría el pageinit encendido solo para la página #index y no para teamliquid.html.

Use lo siguiente en el <head></head> de sus documentos:

 $(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 para get pageinit para el fuego para cada página

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

A partir de jquery 1.7 bind, live y delegate, todos usan el método .on (). Es la forma recomendada de enlazar su página para JQM. También puede hacer cosas interesantes como replace '#index' con '[data-role = page]' para hacer que su código se active en cada página. Aquí hay una JSfiddle que demuestra que esto realmente funcionó. http://jsfiddle.net/codaniel/cEWpy/2/

Tratar de usar
$(function() { /* dom ready */ });
en lugar de
$('#index').bind("pageinit", (function () { ... }));

Luego puede colocar las tags de secuencia de commands dentro de la label de encabezado, eliminar la </script> huérfana en la línea 9 y tiene HTML limpio y todo funcionará bien.