Click to request $.ajax. How can he request it once and close it before requesting it again

  question

The imitation is the petal login effect. His default HTML is like this

<a onclick="app.showSheet('login', {modal: true});  return false;"  Href = "#" class = "login btnwbtn" > < span class = "text" > login < /span></a >

Click Login and a login box will be added to #page.

<div class="sheet-overlay" style="opacity: 1;"  ></div>
 <div id="sheet" class="destroy" style="display: block;   top: 72px;"  >
 <div id="sheet_login" class="sheet">
 <div class="head">
 < h2 > login petals < /h2 >
 </div>
 <div class="body">
 <div class="login-connect">
 < h5 > log in to < /h5 > using the partner website account
 <div class="connections clearfix"><a href="/oauth/weibo/instant_login/" onClick="return false;"  Class="weibo login-button "> Sina Weibo </a > < a href ="/oauth/douban/instant _ login/"onclick =" returnfalse; "  Class="douban login-button "> douban </a > < a href ="/oauth/renren/instant _ login/"onclick =" returnfalse; "  Class="renren login-button "> renren </a > < a href ="/oauth/qzone/instant _ login/"onclick =" returnfalse; "  class="qzone login-button">QQ</a></div>
 < p class="less "> petals that have not been registered can also be registered directly < /p >
 </div>
 <div class="login-form">
 < h5 > log in to < /h5 > using a registered mailbox
 <form id="auth_form" action="https://huaban.com/auth/" method="post" class="Form FancyForm AuthForm">
 <ul>
 <li>
 <div class="input email">
 <input id="login_email" name="email" type="text" value="">
 < label > petal registration mailbox < /label >
 <span class="fff"></span></div>
 </li>
 <li>
 <div class="input password">
 <input id="login_password" name="password" type="password">
 < label > password < /label >
 <span class="fff"></span></div>
 </li>
 </ul>
 <div class="non_inputs"><a id="login_btn" href="#" onClick="return false;"  Class="btn btn18 rbtn"><strong > login </strong > < span > </span > </a > < a id = "reset _ password" href = "#" onclick = "returnfalse;"  Class="less fr "> forgot the password?  </a><a id="back_to_login" href="#" style="display: none;"   onClick="return false;"  Class="less fr "> oh, again!  </a></div>
 </form>
 <div id="reset_msg" style="display: none;"  class="success"></div>
 </div>
 <div class="clear"></div>
 </div>
 < a href="#" title= "close" onClick="app.hideSheet ();  return false;"  class="close"></a></div>
 </div>

After clicking close, this login box will be deleted. And when I came out, I pulled down and closed it up. I put the above code in/include/pop-login.php.

onclick="app.showSheet('login', {modal: true});  return false;"

How does he write this way

$('.login').on('click',function(){
 $.ajax({
 async: false,
 url: "/include/pop-login.php",
 cache: false,
 success: function(html){
 $("#page").append(html);
 bracket
 });
 });
 $('#sheet_login .close').live('click',function(){
 $('.sheet-overlay').remove();
 $('#sheet').remove();
 });

About this feeling?

function on_click_login(){
 $.ajax({
 async: false,
 url: "/include/pop-login.php",
 cache: false,
 success: function(html){
 $("#page").append(html);
 },
 error: function(){
 $('.login').one('click',on_click_login);
 bracket
 });
 bracket
 
 $('.login').one('click',on_click_login);
 $('#page').on('click','#sheet_login .close',function(){
 $('.sheet-overlay').remove();
 $('#sheet').remove();
 $('.login').one('click',on_click_login);
 });

PS, because I don’t like live, I changed it conveniently …