Javascript/AJAX taking two clicks

I'm constructing a log in form that will log me in without refreshing the page.

I have the following page:

    INDEX.php

    <script language="javascript">
    $(document).ready(function()
    {

//log in- send data to php page which creates a session. Log in div is reloaded to display log out button.
       $("#login_form").submit(function()
       {
          $.post("php/loginajax.php",{emai:$('#emai').val(),pass:$('#pass').val()} ,function(data)
          {         
             if(data=='yes') {$('#login').load('inc/headerlogin.php');}
             if(data =='no')   {$("#loginerror").show();}                   
          });
          //return false;
       });

//log out- destroy session and reloa开发者_JS百科d log in div to display log in form again.
       $("#logout").click(function()
       {
          $.post("php/loginout.php");
          $('#login').load('inc/headerlogin.php');
       });

    });
    </script>

Log out button works fine- click it once, session destroyed, login div reloaded to display.

Log in button works if it's on first page load. If log in, then log out then try to log in again, all on same page without refreshing it takes two clicks of the log in button.

Also I've scattered in some alerts both before the if statements and inside them but even when the rest of the code works these aren't being shown... any ideas?

if logout button reloading, i guess u must use live instead of click

$("#logout").live('click',function()
   {
      $.post("php/loginout.php");
      $('#login').load('inc/headerlogin.php');
   });

I wish this helps you..

Been looking back on my questions, seems I should've been making the actual form live:

$("#login_form").live("submit", function(event) { });"