如果按钮调用函数，jQm 弹出窗口不会关闭

Question

单击生成弹出窗口，在 "cancel" 按钮旁边我还放置了用于函数调用的按钮。我认为只放置一个 "close" 就足以关闭弹出窗口，但我需要两次才能关闭它。在这种情况下，我是不是遗漏了什么，或者我必须这样写？

<div data-role="popup" id="popMe" data-overlay-theme="b" data-theme="a" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="b">
   <h1 id='h1pop'>Tap PopUp</h1>
</div>
<div role="main" class="ui-content">
    <h3 class="ui-title">Single tap</h3>
<p>This is a popup...</p>
<a  class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" onclick="myfunction()">Call function</a>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
<a href="#pagetwo" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-transition="flow">To Page 2</a>
  </div>
</div>

function myfunction() {
$("#popMe").popup("close"); 
$("#popMe").popup("close");
alert('Here I'm, in the function');
// ... rest of code
}

Answer 1

下面是一个适合您的片段：

function myfunction() {
  $("#popMe").popup("close");
  console.log("Here I'm, in the function");
  // ... rest of code
}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>

  <body>
    <div data-role="page" id="page-one">
      <div data-role="content">
        <a href="#popMe" data-rel="popup" class="ui-btn ui-corner-all">PopMe</a>
      </div>
      <div data-role="popup" id="popMe" data-overlay-theme="b" data-theme="a" data-dismissible="false" style="max-width:400px;">
        <div data-role="header" data-theme="b">
          <h1 id='h1pop'>Tap PopUp</h1>
        </div>
        <div role="main" class="ui-content">
          <h3 class="ui-title">Single tap</h3>
          <p>This is a popup...</p>

          <button class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" onclick="myfunction()">myFunction</button>
          <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
          <a href="#pagetwo" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-transition="flow">To Page 2</a>
        </div>
      </div>
    </div>
  </body>

</html>

请注意：如果您需要 CDN，我建议您使用来自 code.jquery.com

的 jQuery 移动库

此外：

恕我直言，如果您需要显示小菜单或纯文本提示，弹出窗口效果很好，但如果您还需要表单元素或一些复杂的用户交互，我相信带有对话框选项的页面小部件会是更好的选择.这里有一个参考：JQM Dialog Pages.

只是一点额外的提示：要跟踪您的函数执行，请尝试使用控制台而不是 window.alert，并注意您是如何封闭字符串的。

如果按钮调用函数，jQm 弹出窗口不会关闭

jQm popup won't close if button call a function

popup

jquery-mobile