javascript - How can I debug with jQuery. Why this code does not work? -

i'm doing popup login form css , jquery.

the login popup's right, problem is... way of close popup pressing submit button. why not close when user clicks mask or in close image.

i'm getting crazy this...

please me!!

the code: http://jsfiddle.net/xzamn/

html:

<br /> <a class="btn-sign" href="#login-box">login</a>  <div id="login-box" class="login-popup"> <a href="#" class="btn_close">         <img src="http://www.alisol.com.br/crm/imagens/close_pop_blue.png?v=4" class="btn_close" title="fechar" alt="fechar" /></a>  <form method="post" class="signin" action="#">     <fieldset class="textbox">          <h3>login</h3>          <label class="username">             <input id="username" name="username" value="" type="text" autocomplete="on" placeholder="usuário">         </label>         <label class="password">             <input id="password" name="password" value="" type="password" placeholder="senha">         </label>         <input id="enter" type="submit" value="entrar" />     </fieldset> </form> 

javascript:

$(document).ready(function() {  $('a.btn-sign').click(function() {      // getting variable's value link      var loginbox = $(this).attr('href');      //fade in popup , add close button     $(loginbox).fadein(300);      //set center alignment padding + border     var popmargtop = ($(loginbox).height() + 24) / 2;      var popmargleft = ($(loginbox).width() + 24) / 2;       $(loginbox).css({          'margin-top' : -popmargtop,         'margin-left' : -popmargleft     });      // add mask body     $('body').append('<div id="mask"></div>');     $('#mask').fadein(300);      return false; });  // when clicking on button close or mask layer popup closed $('a.close, #mask').click( function() {    $('#mask, .login-popup').fadeout(300 , function() {     $('#mask').remove();   });  return false; }); }); 

change

$('a.close, #mask').click( function() {  

to

$(document).on("click", 'a.btn_close, #mask', function () { 

use event bubbling can catch click on dynamically created element.

other option add click event after create element.