jquery popup close function not working

问题

I have button on my mobile website. I want to do following:

when I press the button the popup should appear. This popup should contain some text and a OK button. When I press Ok button the popup should disapear, nothing else. The page should stay in the same conditions.

My code is as follows:

<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>

The javascript is as follows:

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

Current situation is:

When I click on the ok button it works for the very first time but not latter.

回答1:

Use <a> instead of <button>. Your code should look like this:

<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

I've also added

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

Javascript isn't necessary in this case

回答2:

Wrap your code in pageinit and use correct event binding using .on.

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

Or, add data-rel="back" attribute to button. However, if you wish to use this, it's safer to add data-history="false" in order not to go back to previous page.

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

Demo

回答3:

Use Class instead of id for button.

Html - button

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

JavaScript

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

来源：https://stackoverflow.com/questions/20213330/jquery-popup-close-function-not-working