jquery弹出关闭功能不起作用

Posted 2023-05-09

【中文标题】jquery弹出关闭功能不起作用

【英文标题】：jquery popup close function not working

【发布时间】：2013-12-11 08:59:51

【问题描述】：

我的移动网站上有按钮。我想做以下事情：

当我按下按钮时，应该会出现弹出窗口。此弹出窗口应包含一些文本和一个确定按钮。当我按下确定按钮时，弹出窗口应该消失，没有别的。该页面应保持相同的条件。

我的代码如下：

<a id="edit-btn2" data-rel="popup" data-transition="slide" data-position-to="window" class= "edit-button1"  data-role="button" href="#popupPanel"></a>

<div data-role="popup" id="popupPanel" data-dismissible='false' data-corners="false" data-theme="b"  style="height:100px; width:300px;">
  <p>This is just a demonstrator</p>
  <button href="#" id= "popup-button"  data-theme="c" data-icon="false" data-mini="false"  >OK</button>
</div>

javascript如下：

$( "#popup-button" ).click(function() 
  $( "#popupPanel" ).popup( "close" );
);

目前的情况是：

当我点击确定按钮时，它是第一次工作，但不是以后。

【参考方案1】：

使用<a> 而不是<button>。您的代码应如下所示：

<a id="edit-btn2" data-rel="popup" data-transition="slide" data-position-to="window" class="edit-button1" data-role="button" href="#popupPanel"></a>

<div data-role="popup" id="popupPanel" data-dismissible="false" data-corners="false" data-theme="b" style="height:100px; width:300px;">
  <p>This is just a demonstrator</p>
  <a href="#" data-role="button" data-rel="back" id="popup-button" data-theme="c" data-icon="false" data-mini="false" >OK</a>
</div>

Demo

我也加了

data-role="button" data-rel="back"

在这种情况下不需要Javascript

【讨论】：

奇怪的是，您的代码不再有效......或者至少它对我不起作用。

【参考方案2】：

将您的代码包装在pageinit 中，并使用.on 使用正确的事件绑定。

$(document).on("pageinit", function () 
    $("#popup-button").on("click", function () 
        $("#popupPanel").popup("close");
    );
);

或者，将data-rel="back" 属性添加到button。但是，如果您想使用它，添加data-history="false" 会更安全，以免返回上一页。

<button href="#" id= "popup-button"  data-theme="c" data-rel="back" data-history="false">OK</button>

Demo

【参考方案3】：

对按钮使用 Class 而不是 id。

html - 按钮

href="#" class= "popup-button"  data-theme="c" data-icon="false" data-mini="false"

JavaScript

$( ".popup-button" ).click(function() 
  $( "#popupPanel" ).popup( "close" );
);