두 번째 클릭시 Fancybox가 작동하지 않습니다.

Question

저는 등록/로그인 시스템에서 작업하고 있습니다. 등록 양식은 fancybox와 함께 작동합니다. 'Register'링크를 클릭하면 fancybox 창에서 등록 양식을 볼 수 있습니다. 양식이 제출되면 사용자 이름이 이미 있는지 확인하는 register.php trough ajax가 실행됩니다. 사용자 이름이 이미 존재하면 메시지를 표시해야합니다. 이 작동하지만 양식을 다시 제출하려면 양식을 닫고 아무 것도 발생하지 않습니다. javascript 함수가 어떤 이유로 실행되지 않습니다. 누구나 내가 뭘 잘못하고 있고 나를 도울 수 있다고 생각하니?

자바 스크립트 : 당신이

echo ' 
    <h3>Register</h3> 
    <p>Username already exists</p> 
    <form method="post" action="" id="register-form"> 
     <fieldset> 
      <input type="text" name="username" class="field" placeholder="Vul hier je gebruikersnaam in..." value="' . $username . '"> 
      <input type="password" name="password" class="field" placeholder="Vul hier je wachtwoord in..." value="' . $password . '"> 
      <input type="text" name="email" class="field" placeholder="Vul hier je e-mailadres in..." value="' . $email . '"> 
      <input type="submit" class="button" value="Registreren"> 
     </fieldset> 
    </form>'; 

'등록'링크

<div id="fbRegisterCntr" style="display: none;"> 
    <div class="popup"> 
     <div class="inner" id="register"> 
      <h3>Register</h3> 
      <form method="post" action="" id="register-form"> 
       <fieldset> 
        <input type="text" name="username" class="field"> 
        <input type="password" name="password" class="field"> 
        <input type="text" name="email" class="field"> 
        <input type="submit" class="button" value="Register"> 
       </fieldset> 
      </form> 
     </div> 
    </div> 
</div> 

Register.php을 클릭했을 때 fancybox에서 열립니다 무엇을 모든 페이지의 바닥 글에

$(function() { 
    $('#register-form').bind('submit', function() { 
     $.ajax({ 
      type: 'POST', 
      cache: false, 
      url: '/register.php', 
      data: $(this).serializeArray(), 
      success: function (data) { 
       alert('test'); 
       $('#register').html(data); 

      } 
     }); 
     return false; 
    }); 
}); 

// 코드

Answer 1

이벤트를 컨테이너 수준에 위임해야합니다.

$('#register').on('submit', '#register-form', function() {...});