jQuery.mobile emerge inmediatamente se oculta después de mostrar

Question

Tengo una pequeña aplicación de teléfono con jquery móvil y red troncal. Estoy tratando de mostrar emergente al usuario llamando manualmente al método .popup().

Todo funciona bien en iOS pero en Android tuve un problema extraño: la ventana emergente se muestra por unos instantes y luego desaparece.

Aquí el código real:

var PostView = Backbone.View.extend({ 
    events: { 
    'touchend .add-comment-button': 'addComment' 
    }, 
    addComment: function() { 

    this.$(".comment-popup").popup('open', { history: false }); 

    return false; // Stop bubbling. 
    } 
}); 

estoy usando la historia: falso, porque esta ventana emergente es parte actualy de subpágina. El código se ve muy simple, simplemente no puedo entender por qué puede desaparecer, y por qué esto sucede solo en dispositivos Android.

Gracias, y lo siento por mi mal inglés.

Answer 1

Tengo exactamente el mismo problema cuando trato de usar popup ('abrir') en un dispositivo Android 2.3 (tanto en el navegador nativo como en firefox) y funciona bien en los navegadores de otros dispositivos. También estoy usando la gestión de eventos de backbone para abrir mi ventana emergente (utilicé el evento tap y no tuve opciones adicionales para que apareciera).

Lo que hice para 'corregir' el problema es que eliminé la gestión de eventos backbone para este evento y agregué un oyente en la función de renderizado. En el caso de que esto sería algo como esto:

events: { 
     // 'touchend .add-comment-button': 'addComment' 
    }, 
    render: function() { 
      $(this.el).html(this.template(this.model)); 
      $(this.el).find('.add-comment-button').tap(function(el){ 
       this.addComment(el); 
       return false; 
      }.bind(this)); 
    } 

no tengo ni idea de dónde viene el problema (debe haber alguna incompatibilidad entre la columna vertebral y jQuery Mobile) y por qué sólo vemos que en Android, pero por el momento con Esta solución parece que mi aplicación funciona bien en cualquier dispositivo.

Edit: uy, resulta que en mi caso el problema era que me faltaba "return false;" en la función que trata con el evento. Ahora que lo agregué, funciona correctamente con la gestión de eventos de backbone. Lamentablemente eso no explica por qué tiene el problema y por qué lo estaba viendo solo en Android.

Answer 2

Pasé horas intentando solucionar este problema.

Finalmente terminé haciendo las siguientes dos cosas que parecían solucionar el problema.

1 - Use el archivo jqm sin comprimir. es decir, jquery.mobile.1.2.0.js

2 - Estaba activando la ventana emergente programáticamente usando la opción 'tocar' - una vez cambiada a la opción 'clic' funcionó.

$('.option').live('click', function() { 
    $('#popup-div').popup('open'); 
}); 

Answer 3

En caso de que ayuda a nadie, he tenido el mismo problema que ocurre con los mapas de Bing, con el método Microsoft.Maps.Events.addHandler(pin, 'click', callback).

No es especialmente agradable, pero en lugar de eso guardaron un ID de pushpin._id e hice lo siguiente:

$("#page").on('vclick', function (event) { 
    if (event.target.parentElement.className === "MapPushpinBase") { 
     $("#stopPopup").popup('open'); 
    } 
}); 

Answer 4

Yo no tenía ganas de cambiar mi .tap() eventos para el evento click y no lo hice Tengo un caso donde podría usar preventDefault() así que acabo de agregar un tiempo de espera a la línea emergente ('open'). Mi hoverdelay en jqm está establecido en 150, así que establecí este tiempo de espera en 600 para estar seguro. Funciona bien, no se siente lento para el usuario.

Answer 5

Pasé horas intentando solucionar este problema.

Finalmente terminé haciendo las siguientes dos cosas que parecían solucionar el problema.

este fragmento de código puede ayudar ->

$('#testBtn').on('tap',function(e){ 
    console.log("button clicked"); 
    e.preventDefault(); 
    $('#testPOPUP').popup("open"); 
}); 

Tenga en cuenta que he utilizado e.perventDefault().

Answer 6

Una forma de 'arreglo' es mediante el establecimiento de data-history="false" en el div emergente

Véase también esta pregunta

JQuery Mobile popup with history=false autocloses

Answer 7

Una opción de fuerza bruta es check whether popup was hidden y vuelva a abrirla.

En un bucle, porque la hora exacta en que se oculta la ventana emergente parece ser variada.

var hidden = $('#' + id + '-popup') .hasClass ('ui-popup-hidden') 
if (hidden) $('#' + id) .popup ('open') 

Un ejemplo de trabajo: http://jsfiddle.net/ArtemGr/hgbdv9s7/

Otra opción podría ser que se unen a popupafterclose:

var reopener = function() {$('#' + id) .popup ('open')} 
$('#' + id) .on ('popupafterclose', reopener) 
$('#' + id) .popup ('open') 

Como aquí: http://jsfiddle.net/ArtemGr/gmpczrdm/

Pero por alguna razón el popupafterclose unión no dispara en iPhone 4 la mitad del tiempo.