jQuery.mobile 弹出窗口在显示后立即隐藏

Posted 2023-05-06

【中文标题】jQuery.mobile 弹出窗口在显示后立即隐藏

【英文标题】：jQuery.mobile popup immediately hides after showing

【发布时间】：2012-09-30 22:53:48

【问题描述】：

我有一个带有 jquery mobile 和骨干网的小型 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.
  
);

我使用 history: false 因为这个弹出窗口实际上是子页面的一部分。 代码看起来很简单，我只是不明白为什么它会消失，以及为什么这只发生在 android 设备上。

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

【参考方案1】：

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

最后我做了以下两件事似乎解决了这个问题。

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

2 - 我使用“tap”选项以编程方式触发弹出窗口 - 一旦更改为“click”选项，它就起作用了。

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

【讨论】：

我没有使用 Backbone，在我的应用程序中，问题出现在 iOS (6.0.1)，而不是 Android (4.0.3)（jQuery Mobile 版本为 1.2）。我只需要第 2 步 - 切换到 click 事件 - 来解决它。另一种对我有用的解决方案——让我坚持触摸事件——是在事件处理程序开始时在事件对象上调用preventDefault()，最终调用popup('open')。

这个问题在 JQueryMobile 1.4.5 中仍然出现 - 从 'tab' 更改为 'click' 也为我解决了。

【参考方案2】：

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

最后我做了以下两件事似乎解决了这个问题。

这段代码 sn-p 可以帮助你 ->

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

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

【参考方案3】：

我不想将我的 .tap() 事件更改为 click 事件，而且我没有可以使用 preventDefault() 的情况，所以我只是在 popup('open') 行中添加了一个超时.我在 jqm 中的 hoverdelay 设置为 150，所以为了安全起见，我将此超时设置为 600。工作正常，不会让用户感到呆滞。

【参考方案4】：

“修复”它的一种方法是在弹出 div 上设置 data-history="false"

另请参阅此问题

JQuery Mobile popup with history=false autocloses

【参考方案5】：

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

我为“纠正”问题所做的工作是删除了该事件的主干事件管理，并在渲染函数中添加了一个侦听器。在您的情况下，这看起来像这样：

    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 上看到它，但目前使用这种解决方法，我的应用似乎可以在任何设备上正常运行。

编辑：哎呀，事实证明，在我的情况下，问题是我缺少“return false;”在处理事件的函数中。 现在我添加了它，它可以与主干事件管理一起正常工作。 遗憾的是，这并不能解释为什么你会遇到这个问题，以及为什么我只在 android 上看到它。

【参考方案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');
    
);

【参考方案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 上触发。