jquery mobile - jquerymobile - ¿Cómo usar pageinit correctamente?
jquery mobile touch (5)
Creo que es mejor mover tu código JavaScript a otro archivo ya que mientras navegas por tu sitio jQuery Mobile puede limpiar (leer: eliminar de DOM) esa página myPage y por lo tanto tendrás que volver a cargarla y luego volver a ejecutar el mismo bloque de código que definió y vincula 2 oyentes para el evento pageinit .
Eso es básicamente por qué sugieren utilizar las funciones on live o on live , pero se cae si incluye el código de enlace en la página;)
Sin embargo, si insistes en colocar tu código por página, utiliza bind lugar de live .
Ref: http://jquerymobile.com/demos/1.0/docs/pages/page-cache.html
jQuery Mobile por lo tanto tiene un mecanismo simple para mantener el DOM ordenado. Cada vez que carga una página a través de Ajax, jQuery Mobile señala la página que se eliminará del DOM cuando navegue más tarde (técnicamente, en el evento pagehide).
Tengo un único archivo para cada página y estoy tratando de implementar el controlador de eventos pageinit en cada página (creo que lo que pertenece estrictamente a una página, debe declararse allí) como se muestra a continuación:
<body>
<div id="myPage" data-role="page">
<!-- Content here -->
<script type="text/javascript">
$("#myPage").live(''pageinit'', function() {
// do something here...
});
</script>
</div>
</body>
El evento está vinculado correctamente a la página, por lo que se ejecuta el código pero, ahora mi problema, si voy a otra página y regreso más tarde, el evento pageinit se ejecutará dos veces. Creo que es porque el método .live vincula el evento pageinit nuevamente a la página. Pero, ¿no debería el evento pageinit llamar solo una vez en la inicialización de la página? ¿Qué me falta aquí?
Una solución rápida que he utilizado es declarar una variable que contiene la función de controlador.
var handler = function() {
// your code
};
Entonces siempre use die() antes de vincular el controlador con live()
$( "#myPage" ).die( handler ).live( handler );
Estoy seguro de que este no es el uso previsto por los autores, pero funciona, puedes dejar tu código dentro de la página DIV.
Resuelvo el problema pasando el nombre del evento, en este caso el "pageinit" en lugar del manejador.
<script defer="defer" type="text/javascript">
var supplier = null;
$("#pageID").die("pageinit"); //<--- this is the fix
$("#pageID").live("pageinit", function(event){
console.log("initialized - @(ViewBag.ID)");
supplier = new Tradie.Supplier();
supplier.Initialize("@(ViewBag.ID)");
});
Ref: http://www.rodcerrada.com/post/2012/04/26/jQuery-Mobile-Pageinit-Fires-More-Than-Once.aspx
$("#page1").live("pageinit", function () {
alert(''pageinit'');
$("#page1").die("pageinit"); //<--- prevent from firing twice on refresh
});
Estoy bastante seguro de que recomiendan enlazar pageinit al documento usando on (). P.ej
$(document).on (''pageinit'', ''#myPage'', function (event) {
en lugar de tener el pageinit vinculado a la página, que se vuelve a ini- ciar. De hecho, pensé que $ (document) .on () era la forma recomendada de vincular eventos en jQuery, en general, ahora.