jQuery Mobile:以编程方式打开一个对话框后关闭另一个

Question

我目前正在开发一个使用jQuery和jQuery Mobile的网站。它有一个登录对话框，其中包含一个登录按钮和一个注册按钮。

<a href="" onClick="$('#LoginDialog').dialog('close'); $.mobile.changePage('#RegisterDialog', {role:'dialog', transition:'pop'});" data-role="button" data-icon="check" data-inline="true">Register</a>

这是Register按钮的代码。我关闭LoginDialog，并在"onClick"后打开RegisterDialog，但它实际做的是关闭LoginDialog，然后显示RegisterDialog一个快速的时刻，并发送我回LoginDialog。如果我加上:

setTimeout(function() {$.mobile.changePage('#RegisterDialog', {role:'dialog', transition:'pop'});}, 100)

有没有办法解决这个问题而不造成这短暂的延误?我将非常感谢任何有用的答案，因为我一直在试图找到解决这个问题的解决方案，相当长一段时间，我想不出一种方法来修复它，除了把关闭和打开函数之间的延迟…

编辑:我想在打开注册对话框之前关闭登录对话框的原因很简单，因为我想让用户在关闭注册对话框时最终进入主页面。因此，在登录对话框中打开第二个对话框(我也试图这样做)并不能解决我的问题…

编辑:我找到了解决问题的办法。我只是从对话框中删除了关闭按钮并在底部添加了一个取消按钮，它只是简单地执行

$.mobile.changePage('#')

这正是我所需要的…抱歉，我的问题有点怪

Answer 1

您可以在jQM中链接对话框。既然您在onClick处理程序中只做changePage，那么为什么不直接声明式地做呢?

<div data-role="page" data-theme="a" id="home">
    <div data-role="header" data-theme="a" align="center">
        <h1>Home</h1>
    </div>
    <div data-role="content">
        <p>You need to log in first</p>
        <a href="#LoginDialog" data-rel="dialog" data-transition="pop" 
           data-role="button" data-icon="check" data-inline="true">Login in</a>
    </div>
</div>
<div data-role="page" data-theme="d" id="LoginDialog">
    <div data-role="header" data-theme="a" align="center">
        <h1>Login</h1>
    </div>
    <div data-role="content">
        <p>Provide your login information</p>
        <a href="#RegisterDialog" data-rel="dialog" data-transition="pop" 
           data-role="button" data-icon="check" data-inline="true">Register</a>
    </div>
</div>
<div data-role="page" data-theme="e" id="RegisterDialog">
    <div data-role="header" data-theme="e" align="center">
        <h1>Register</h1>
    </div>
    <div data-role="content">
        <p>Provide your registration information</p>
        <a href="#LoginDialog" data-rel="dialog" data-transition="pop" 
           data-role="button" data-icon="check" data-inline="true">Create an account and retutn to Login</a>
    </div>
</div>

这里是jsFiddle