Función del pageshow de Jquery Mobile

Question

Estoy construyendo una aplicación web usando el framework jqm y he estado intentando usar la función pageshow al incluir un widget jQuery, k3dcarousel. En la página en cuestión, tengo mi guión debajo del data-role="page" div,

$("#page-about").live(
    "pageshow", 
    function (event) { 
     $('#k3dCarousel_portrait').k3dCarousel(); 
    } 
); 

Parece que tengo que hacer clic en mi enlace dos veces para obtener la función de JS para cargar, lo que haría yo creo que estoy utilizando este funciona mal Además, si no utilizo la función $("#page-about").die(); debajo de la función pageshow, la secuencia de comandos se cargará varias veces si hago clic atrás y vuelvo a hacer clic en el enlace.

¿Estoy usando la lógica pageshow incorrecta? ¿Hay una mejor manera de lograr lo que estoy tratando de hacer: AJAX esta página en mi marco móvil.

Entiendo que esta es una pregunta bastante específica, pero espero que haya una respuesta genérica a esto, ya que me parece que esto podría sucederle a cualquier widget.

Cualquier ayuda es muy apreciada, puedo pegar más código si eso ayuda.

Gracias por su tiempo.

Answer 1

Dado que es vinculante para el evento pageshow, la función anónima se activará cada vez que vea la página. Si sólo desea llamar el código en la primera vista de la página a continuación, o bien unirse a los pagecreate/pageinit eventos o detectar la existencia de la k3dCarousel en su pageshow código:

$("#page-about").live(
    "pageshow", 
    function (event) { 
     //check for the existence of HTML within the container element 
     if ($('#k3dCarousel_portrait').html().length == 0) { 
      $('#k3dCarousel_portrait').k3dCarousel(); 
     } 
    } 
); 

Aquí es una explicación de todo el jQuery Eventos específicos para dispositivos móviles: http://jquerymobile.com/demos/1.0rc3/docs/api/events.html