Question

我有一个带有jquery mobile和backbone的小型phonegap应用程序。我试图通过手动调用.popup（）方法向用户显示弹出窗口。

在iOS上一切正常但在Android上我遇到了一个奇怪的问题：弹出窗口显示片刻而不是消失。

这里是实际代码：

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

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

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

我正在使用历史记录：false，因为此弹出窗口实际上是子页面的一部分。代码看起来很简单，我只是无法理解为什么它会消失，为什么这只发生在Android设备上。

谢谢，抱歉我的英语不好。

Answer 1

我花了好几个小时试图解决这个问题。

最后，我最终做了以下两件似乎解决问题的事情。

1 - 使用未压缩的jqm文件。即jquery.mobile.1.2.0.js

2 - 我正在使用“点按”选项以编程方式触发弹出窗口 - 一旦更改为其工作的“点击”选项。

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

Answer 2

我花了好几个小时试图解决这个问题。

最后，我最终做了以下两件似乎解决问题的事情。

此代码段可以为您提供帮助 - ＆gt;

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

请注意我使用了e.perventDefault().

Answer 3

我不想将我的.tap（）事件更改为click事件，我没有可以使用preventDefault（）的情况，所以我只是在弹出窗口（'open'）中添加了一个超时。我在jqm中的hoverdelay设置为150，所以我将此超时设置为600只是为了安全起见。工作正常，对用户来说不会感到迟钝。

Answer 4

解决问题的一种方法。它是通过在弹出式div上设置data-history="false"

另见这个问题

JQuery Mobile popup with history=false autocloses

Answer 5

我尝试在Android 2.3设备（在本机浏览器和firefox中）使用popup（'open'）时遇到完全相同的问题，并且它在其他设备上的浏览器上运行良好。我也使用骨干事件管理来打开我的弹出窗口（使用tap事件并且没有弹出的aditionnal选项）。

我所做的'纠正'问题的原因是我删除了此事件的骨干事件管理，并在render函数中添加了一个监听器。在你的情况下，这看起来像这样：

    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));
    }

我不知道问题的来源（必须是骨干和jquery移动设备之间的一些不兼容）以及为什么我们只在Android上看到它但是目前使用这种解决方法我的应用程序似乎在任何设备上都能正常工作。

编辑：oops，事实证明，在我的情况下问题是我错过了“return false;”在处理事件的函数中。现在我添加了它，它可以与骨干事件管理一起正常工作。可悲的是，这并没有解释为什么你有这个问题，为什么我只在android上看到它。

Answer 6

如果它对任何人有帮助，我使用Microsoft.Maps.Events.addHandler(pin, 'click', callback)方法在Bing地图中遇到了同样的问题。

不是特别好，但我在pushpin._id中存储了一个ID并执行了以下操作：

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

Answer 7

一个强力选项是check whether popup was hidden并重新打开它。

在一个循环中，因为弹出窗口隐藏的确切时间似乎是多变的。

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

一个工作示例：http://jsfiddle.net/ArtemGr/hgbdv9s7/

另一种选择可能是绑定到popupafterclose：

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

像这里：http://jsfiddle.net/ArtemGr/gmpczrdm/

但由于某些原因，popupafterclose绑定在一半时间内无法在iPhone 4上启动。

jQuery.mobile popup在显示后立即隐藏

7 个答案: