online - ¿Cómo inicializar páginas en jquery mobile? pageinit no disparando
jquery mobile themes (11)
@Wojciech Bańcer
De los documentos jQuery:
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
¿Cuál es la forma correcta de inicializar objetos en una página móvil de jquery? Los eventos dicen que usen " pageInit() " sin ejemplos de esa función, pero den ejemplos de enlace con el método " pageinit " (note la diferencia entre mayúsculas y minúsculas). Sin embargo, no veo el evento en absoluto en esta página de prueba simple:
<html>
<body>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
<div data-role="page" id="myPage">
test
</div>
<script>
$("#myPage").live(''pageinit'',function() {
alert("This never happens");
});
</script>
</body>
</html>
¿Qué me estoy perdiendo? Debo añadir que si cambias la pageinit a otro evento como pagecreate este código funciona.
---- ACTUALIZACIÓN ----
Este bug está marcado como "cerrado" en el rastreador de problemas de JQM. Aparentemente las opiniones difieren sobre si esto funciona correctamente o no.
Empezó a funcionar cuando incrustó el script dentro de la página div:
<body>
<div id="indexPage" data-role="page">
<script type="text/javascript">
$("#indexPage").live(''pageinit'', function() {
// do something here...
});
</script>
</div>
</body>
Usado jQuery Mobile 1.0RC1
La forma más fácil que encontré para lidiar con esto fue usar JQM + Steal. Funciona como un amuleto siempre y cuando pongas:
<script type=''text/javascript'' src=''../steal/steal.js?mypage''></script>
Dentro de la función data-role=''page'' div
Luego use AJAX para conectar cualquier cosa que pueda usar el mismo mypage.js y use un enlace externo (usando la etiqueta rel="external" ) para cualquier cosa que requiera una página de robo diferente.
Los eventos no se activan en la página inicial, solo en las páginas que carga a través de Ajax. En el caso anterior, puede simplemente:
<script>
$(document).ready(function() {
alert("This happens");
});
</script>
Prueba esto:
$(''div.page'').live(''pageinit'', function(e) {
console.log("Event Fired");
});
Tuve que poner el script en la sección de la página HTML, que para mí es un error. Se carga normalmente en un navegador (no a través de AJAX) y todo en una sola página, incluido javascript. Se supone que no tenemos que usar documentos listos.
pageinit no se activará en caso de que esté en páginas secundarias (página NO PRINCIPAL) si está escrito en una etiqueta <script> común ...
Tengo un problema así: en las páginas secundarias que no están cargadas con ''rel = "external"'', el código en la etiqueta <script> común nunca se ejecuta ...
realmente este código siempre se ejecuta ...
<body>
<div id="indexPage" data-role="page">
<script type="text/javascript">
$("#indexPage").live(''pageinit'', function() {
// do something here...
});
</script>
</div>
</body>
aunque si hiciste una "interfaz con pestañas", usar "páginashow" es mejor
.live() está en desuso, la sugerencia es usar .on() en jQuery 1.7+:
<script type="text/javascript">
$(document).on(''pageinit'', ''#indexPage'', function(){
// code
});
</script>
Consulte el documento en línea para obtener más información sobre .on() : http://api.jquery.com/on/
$(document).on("pageinit", "#myPage", function(event) {
alert("This page was just enhanced by jQuery Mobile!");
});
jQuery(document).live(''pageinit'',function(event){
centerHeaderDiv();
updateOrientation();
settingsMenu.init();
menu();
hideMenuPopupOnBodyClick();
})
Esto está funcionando ahora. ¡Ahora todas las transiciones de página y todas las funcionalidades de JQM AJAX funcionarían junto con sus funciones de JavaScript definidas! ¡Disfrutar!