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>

这是“注册”按钮的代码。我正在关闭LoginDialog并在“onClick”内部之后立即打开RegisterDialog，但它实际上做的是关闭LoginDialog，然后快速显示RegisterDialog并将我发送回LoginDialog。如果我添加：

，它确实有效

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

如果没有这么短暂的延迟，有没有办法解决这个问题？我非常感谢任何有用的答案，因为我一直试图找到这个问题的解决方案已经有一段时间了，除了在关闭和打开函数之间设置延迟之外，我想不出办法解决它。

编辑：我想在打开注册对话框之前关闭登录对话框的原因仅仅是因为我希望用户在关闭注册对话框时最终在主页面上。因此，在登录对话框中打开第二个对话框（我也尝试过这样做）并不能解决我的问题......

编辑：我找到了解决问题的方法。我刚刚从对话框中删除了关闭按钮，并在底部添加了一个取消按钮，只需执行

$.mobile.changePage('#')

这就是我真正需要的......对不起我的虚假问题：）

Answer 1

您可以在jQM中 chain dialogs 。而且，由于您在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

jQuery Mobile：在关闭另一个之后以编程方式打开一个Dialog

1 个答案: