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> 

Это код для кнопки «Регистрация». Я закрываю LoginDialog и открываю RegisterDialog сразу после «onClick», но то, что он на самом деле делает, это закрыть LoginDialog, а затем быстро показать RegisterDialog и отправить меня обратно в LoginDialog. Он работает, если я добавлю:

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

Есть ли способ исправить эту проблему без этой короткой задержки? Я очень благодарен за любые полезные ответы, так как я пытался найти решение этой проблемы в течение довольно долгого времени, и я не могу придумать, как устранить ее, кроме задержки между функциями закрытия и открытия. ..

EDIT: Причина, по которой я хочу закрыть диалоговое окно входа в систему, прежде чем открывать диалоговое окно Register, просто потому, что я хочу, чтобы пользователь попал на главную страницу, когда он закрывает диалоговое окно Register. Поэтому открытие второго диалога в диалоговом окне входа в систему (который я также пытался сделать) не решает мою проблему ...

EDIT: Я нашел решение моей проблемы. Я просто убрал кнопку закрытия из диалогового окна и добавил кнопку отмены в нижней части, которая просто делает

$.mobile.changePage('#') 

Это было на самом деле все, что мне нужно ... Извините за мой noobish вопрос :)

Answer 1

Вы можете chain dialogs в 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