在我的移动应用程序中,我有两个相邻的按钮,它们与同一弹出窗口相关。
单击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/
上测试了此问题,有时也会出现同样的问题。(在我的移动设备上(
我应该使用多个弹出窗口,而不是将所有按钮关联到一个弹出窗口吗?
目前,我阻止了默认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 } );