一旦按下相关按钮,JQuery 移动弹出窗口并不总是出现

Posted

技术标签:

【中文标题】一旦按下相关按钮,JQuery 移动弹出窗口并不总是出现【英文标题】:JQuery mobile popup does not always come up once pressing related buttons 【发布时间】:2018-12-25 04:08:14 【问题描述】:

在我的移动应用程序中,我有两个彼此相邻的按钮,它们与同一个弹出窗口相关。

单击first 按钮后,弹出窗口会打开一条消息(数据代码属性)。然后,单击second 按钮(关闭弹出窗口)后,再次单击该second 按钮后将不会再次打开弹出窗口(带有另一条消息)。该按钮看起来像是被选中的,只有当用户将焦点从按钮上移开然后再次按下它时,弹出窗口才会再次打开。

它在您关闭弹出窗口而不单击second 按钮的情况下效果很好。

我的按钮具有以下属性:

role = null;
icon = 'grid';
rel = 'popup';

单击按钮后,html 会发生变化:

$( this.selector ).off( "tap" ).on( "tap", ".ui-icon-grid", function() 
    $( "#popup" ).html( $( this ).attr( "data-code" ) );
 );

此问题仅发生在移动设备上。

通过复制Open Popup 按钮在https://api.jquerymobile.com/popup/ 上测试了这个问题,有时也会出现同样的问题。 (在我的移动设备上)

我应该使用多个弹出窗口而不是将所有按钮关联到一个弹出窗口吗?

【问题讨论】:

【参考方案1】:

现在我阻止了默认的 JQuery 移动事件发生,并从那里接管它。这可以防止发生奇怪的行为。仍然欢迎更好的解决方案。

event.preventDefault();
var $popup = $( "#popoup" );
var $button = $( this );
var buttonOffset= $button.offset();
var buttonCenterY = buttonOffset.top + ( $button.height() / 2 );
var buttonCenterX = buttonOffset.left + ( $button.width() / 2 );
$popup.html( $button.attr( "data-code" ) );
$popup.popup( "open",  x: buttonCenterX, y: buttonCenterY  );

【讨论】:

以上是关于一旦按下相关按钮,JQuery 移动弹出窗口并不总是出现的主要内容,如果未能解决你的问题,请参考以下文章

需要确定在 JQuery 移动弹出窗口中单击的按钮并据此执行操作

滚动页面时隐藏jquery移动弹出窗口

不阻止 UI 的 jQuery 移动弹出窗口

关闭弹出窗口并导航到 jQuery Mobile 中的另一个页面

从另一个弹出窗口打开一个弹出窗口

谷歌地图没有在我的 jQuery 移动弹出窗口上绘制? [复制]