简体   繁体   English

jQuery Mobile对话框立即关闭

[英]jQuery Mobile dialog closes immediately

I know that this topic is well known, but all solutions I found don't solve my case. 我知道这个主题是众所周知的,但是我发现的所有解决方案都不能解决我的问题。 I tried to create a fiddle for this, but it seems that I don't have the know-how to setup it correctly: http://jsfiddle.net/tMKD3/6/ . 我试图为此创建一个小提琴,但似乎我没有正确设置它的专门知识: http : //jsfiddle.net/tMKD3/6/ I simplified the code to demonstrate the problem more simplified. 我简化了代码,以更简化地演示问题。

So I describe it here and I hope it is understandable. 所以我在这里描述它,希望它是可以理解的。 I have a jQuery Mobile page and a dialog. 我有一个jQuery Mobile页面和一个对话框。 With onMouseUp event a javascript function should be called, which does something and opens the dialog. 使用onMouseUp事件,应调用javascript函数,该函数将执行某些操作并打开对话框。 The dialog should stay open until the close button is clicked and then the start page is showed again. 对话框应保持打开状态,直到单击关闭按钮,然后再次显示开始页面。 In my case the dialog closes immediately. 就我而言,该对话框立即关闭。

Here the HTML code: 这里的HTML代码:

<body>
<div data-role="page" id="start" data-theme="e">
    <div data-role="header" data-position="fixed" data-theme="e">
         <h1 id="startHeader"></h1>

    </div>
    <div data-role="content">   
        <a href="#page" id="buttonP1" onMouseUp="setup()" data-iconpos="right" data-role="button" data-prefetch data-mini="true"></a>
        <a href="#page" id="buttonP2" onMouseUp="setup()" data-iconpos="right" data-role="button" data-prefetch data-mini="true"></a>
        <a href="#page" id="buttonP3" onMouseUp="setup()" data-iconpos="right" data-role="button" data-prefetch data-mini="true"></a>
    </div>
</div>
<!-- Dialog -->
<div data-role="dialog" id="dialog" data-theme="e">
    <div data-role="header" data-theme="e" data-position="fixed" data-close-btn="none">
         <h3 id="dialogHeader"></h3>
    </div>
    <div data-role="content" data-theme="e">
        <a href="#start" type="button" data-role="button" id="dialogButton" data-rel="back"></a>
    </div>
</div>

Here the javascript code: 这是javascript代码:

$(document).ready(function(){

    // set button text
    $("buttonP1").text("Test");
    $("buttonP2").text("Test");
    $("buttonP3").text("Test");

});

function setup() {

    // set dialog header text
    $("dialogHeader").text("Dialog");
    $("dialogButton").text("Close");

    // call dialog and the dialog should stay opened until the close button is pressed 
    $.mobile.changePage('#dialog', {
        transition: 'pop',
        role: 'dialog'
    });
    return false;

    // after calling the dialog I do some additional stuff like reset some counters and so on
}

In similar articles I found the problem was the forgotten return false; 在类似的文章中,我发现问题在于被遗忘的return false; , but here it doesn't helps. ,但这没有帮助。 Has somebody an idea what I did wrong and where the mistake is? 有人知道我做错了什么,错误在哪里?

Thank you very much in advance for your help. 预先非常感谢您的帮助。

Greetings, Thomas 托马斯,问候

you can give a timeout for this: 您可以为此设置超时:

 <script>

 $(document).ready(function(){

// set button text
$("#buttonP1").text("Test");
$("#buttonP2").text("Test");
$("#buttonP3").text("Test");

});

 function setup() {

// set dialog header text
   $("#dialogHeader").html("Dialog");
  $('#dialogButton').html('Close');

    // call dialog and the dialog should stay opened until the close button is pressed 
    setTimeout(function () {
     $.mobile.changePage('#dialog', {
     transition: 'pop',
      role: 'dialog'
   });
  }, 100);
    return false;

    // after calling the dialog I do some additional stuff like reset some counters and    so on
 }
</script>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM