jquery弹出关闭功能不起作用

Question

我的手机网站上有按钮。我想要做以下事情：

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

我的代码如下：

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

目前的情况是：

当我点击确定按钮，它适用于极第一次但不是后者。

Answer 1

使用Class而不是id作为按钮。

的Html - 按钮

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

的JavaScript

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

Answer 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

Answer 3

使用<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是没有必要在这种情况下